在Laravel中单击下拉标签后隐藏回声

Question

i具有以下代码，该代码将显示通知计数。我需要在单击下拉菜单时隐藏数字。

<li class="dropdown">
    <a href="#" class="dropdown-toggle" 
                data-toggle="dropdown" 
                role="button" 
                aria-haspopup="true" 
                aria-expanded="false"
     >
          <span class="glyphicon glyphicon-globe"></span>
          Notifications 
          <span class="badge">{{count(auth()->user()->notifics)}}</span>
     </a>
     <ul class="dropdown-menu">
<li>

Answer 1

如果我正确理解，则要隐藏<span class="badge">元素。有很多方法可以做到这一点。其中之一是使用jQuery如下

$(".dropdown-toggle").click(function() {
  $('.badge').hide();
});

，如果您不想使用jQuery并将 style="display:none"或 hidden更改为元素。

Answer 2

尝试这个。

<li class="dropdown">
          <div id="itemStatus"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span>Notifications <span class="badge">{{count(auth()->user()->notifics)}}</span></a></div>
          <ul class="dropdown-menu" onclick="showFunction()">
<li>

//javascript

<script>
function showFunction() {
  var x = document.getElementById("itemStatus");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Answer 3

我猜你不使用jQuery，所以我使用纯JavaScript进行答案。

如果要完全删除徽章，请使用以下方式：设置您的<a>标签：

<a href="#" id="button_id" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span>Notifications <span class="badge">{{count(auth()->user()->notifics)}}</span></a>

然后使用JavaScript：

<script>document.getElementById("button_id").addEventListener("click", function(e){
  e.preventDefault();
  document.getElementById("button_id").innerHTML = "<span class='glyphicon glyphicon-globe'></span>Notifications";
});
</script>

如果要暂时隐藏徽章，则：

以下设置您的<a>标签：

<a href="#" id="button_id" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span>Notifications <span id="hide_me" class="badge">{{count(auth()->user()->notifics)}}</span></a>

并使用此JavaScript代码将其隐藏：

<script>document.getElementById("button_id").addEventListener("click", function(e){
  e.preventDefault();
  document.getElementById("hide_me").style.display = "none";
});
</script>

要回来，使用：

document.getElementById("hide_me").style.display = "block";