如何一次隐藏/只显示一个子菜单？

时间：2017-01-04 11:25:07

标签： jquery html css show-hide

我创建了一个ul菜单，当我点击list时，子菜单会显示/隐藏。我的问题是我有2个子菜单​​。当我点击其中一个时，其他子菜单也会受到影响。如何隐藏/显示对应的子菜单？

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".sub_menu").click(function() {
    $(".sub").toggle();
  });
});
＆＃13; 
.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

使用$(this)和find()之类的：

$(this).find(".sub").toggle();

工作片段：

$(document).ready(function() {
   $(".sub_menu").click(function() {
     $(this).find(".sub").toggle();
   });
 });
.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>

是的，正如@Satpal建议的那样，将click事件绑定到锚标记而不是li元素是一种更好的方法，否则您的点击将完成整个下拉列表。我不认为你想要的。

我的解决方案是使用$(this)和next()：

$(".sub_menu > a").click(function(e) {
  e.preventDefault();
  $(this).next('.sub').toggle();
});


$(document).ready(function() {
  $(".sub_menu > a").click(function(e) {
    e.preventDefault();
    $(this).next('.sub').toggle();
  });
});
.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>

答案 1 :(得分：2)

在jQuery选择器中设置context参数。

$(document).ready(function(){    
    $(".sub_menu").click(function(){
        $(".sub", this).toggle();
        // --------^------- here
    });    
});

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".sub_menu").click(function() {
    $(".sub", this).toggle();
  });
});
＆＃13; 
.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13; 仅供参考：根据您的代码，当您在ul内点击时，它会触发事件。要避免这种情况，您需要阻止事件冒泡或将Click事件处理程序绑定到{em> @Satpal 建议的a标记。

使用event.stopPropagation()阻止事件冒泡：

$(document).ready(function(){    
    $(".sub_menu").click(function(){
        $(".sub", this).toggle();
    }).find('.sub').click(function(e){
        e.stopPropagation();
    });    
});

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".sub_menu").click(function() {
    $(".sub", this).toggle();
  }).find('.sub').click(function(e) {
    e.stopPropagation();
  });
});
＆＃13; 
.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

您需要使用this，即当前元素上下文中的target元素。我建议你将点击处理程序绑定到sub_menu直接子anchor 元件

$(".sub_menu > a").on('click', function(e) {
    e.preventDefault();
    $(this).closest('.sub_menu').find(".sub").toggle();
});


$(document).ready(function() {
    $(".sub_menu > a").on('click', function(e) {
        e.preventDefault();
        $(this).closest('.sub_menu').find(".sub").toggle();
    });
});
.sub {
    margin: 0px;
}
.sub_menu {
    margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">Home</a></li>
    <li class="sub_menu"><a href="#">Portfolio</a>
        <ul class="sub">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Pages</a></li>
    <li><a href="#">Shop</a></li>
    <li class="sub_menu"><a href="#">components</a>
        <ul class="sub">
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </li>
    <li><a href="#">Features</a></li>
</ul>

答案 3 :(得分：2)

<ul class="nav nav-tabs my-tabs" role="tablist"><li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>
<li class="active"><a href="#tab0" role="tab" data-toggle="tab">Write Mail</a></li>
<li><a href="#tab1" role="tab" data-toggle="tab">Hint</a></li>
<li><a href="#tab2" role="tab" data-toggle="tab" onclick="loadTab(2, 'custom', 0)">Custom</a></li>
<li><a href="#tab3" role="tab" data-toggle="tab" onclick="loadTab(3, 'Mails', 0)">Mails</a></li>
<li><a href="#tab4" role="tab" data-toggle="tab" onclick="loadTab(4, 'customer', 0)">Customer Logs</a></li>
<li><a href="#tab5" role="tab" data-toggle="tab">Options</a></li>
<li><a href="#tab6" role="tab" data-toggle="tab" onclick="loadTab(6, 'smartlog', 0)">Smartlogs</a></li>

 $(document).ready(function(){
                    $(".sub_menu").click(function(){
                        $(this).find(".sub").toggle();
                    });
});
.sub{
    margin:0px;
}
.sub_menu{
  margin:auto;
  }

相关问题
最新问题