我一直在尝试使这项工作有问题。
我有这个子菜单，当我点击它的兄弟时，我想点击它的兄弟ul。
我在这里进行了研究并尝试了几件事无济于事。
这就是我的代码现在的样子，切换工作正常：
if ( $(window).width() < 740) {
$('.submenu').click(function(e){
e.stopPropagation();
e.preventDefault();
var el = (e.target || e.srcElement);
var $this = $(this);
$(el).siblings('ul').slideToggle();
$(el).siblings('ul').addClass('activeState');
if( $this.siblings().hasClass('activeState')){
$this.slideUp();
}
$(el).find('span').toggleClass('bg-arrow-down bg-arrow-up');
});
}
这或多或少，我的HTML看起来像。它有各种子菜单，这些是我试图让它起作用的菜单。
<div class="panel panel-default">
<!-- <div class="nav-item-container"> -->
<div class="panel-heading head-category">
<div class="panel-title">
<span><a href="http://www.yahoo.com">Products</a></span>
<a data-toggle="collapse" href="#menuPanelListGroup">
<i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
</a>
</div>
</div>
<ul class="list-group collapse out" id="menuPanelListGroup">
<li class="list-group-item children-list-group">
<a data-toggle="collapse" href="#menuPanelSubListGroup">
<span>Item 1</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</a>
<ul id="menuPanelSubListGroup" class="collapse children-list-sublink">
<li class="list-group-item children-list-group">
<span><a href="#">SubItem 1</a></span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 2</span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 3</span>
</li>
</ul>
</li>
<li class="list-group-item children-list-group">
<span>Item 2</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 3</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 4</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 5</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
</ul>
<!-- </div> -->
<!-- <div class="nav-item-container"> -->
<div class="panel-heading head-category">
<div class="panel-title">
<span><a href="#">Latin Markets</a></span>
<a data-toggle="collapse" href="#menu2PanelListGroup">
<i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
</a>
</div>
</div>
<ul class="list-group collapse out" id="menu2PanelListGroup">
<li class="list-group-item children-list-group">
<a data-toggle="collapse" href="#menu2PanelSubListGroup">
<span>Item 1</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</a>
<ul id="menu2PanelSubListGroup" class="collapse children-list-sublink">
<li class="list-group-item children-list-group">
<span><a href="#">SubItem 1</a></span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 2</span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 3</span>
</li>
</ul>
</li>
<li class="list-group-item children-list-group">
<span>Item 2</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 3</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 4</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 5</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
</ul>
<!-- </div> -->
<!-- <div class="nav-item-container"> -->
<div class="panel-heading head-category">
<div class="panel-title">
<span><a href="#">Shows</a></span>
<a data-toggle="collapse" href="#tradeshowPanelListGroup">
<i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
</a>
</div>
</div>
<ul class="list-group collapse out" id="tradeshowPanelListGroup">
<li class="list-group-item children-list-group">
<a data-toggle="collapse" href="#tradeshowPanelSubListGroup">
<span>Item 1</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</a>
<ul id="tradeshowPanelSubListGroup" class="collapse children-list-sublink">
<li class="list-group-item children-list-group">
<span><a href="#">SubItem 1</a></span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 2</span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 3</span>
</li>
</ul>
</li>
<li class="list-group-item children-list-group">
<span>Item 2</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 3</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 4</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 5</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
</ul>
只是if语句不起作用。
答案 0 :(得分：1)
不确定您在哪里看不到这种情况 - 如果您将窗口宽度视为窗口宽度，则可能是也可能不是。下面的代码工作正常，我添加了一个maxWidth值，而不是对你正在使用的740进行硬编码。
我想问题是，你想要完成什么？当宽度超过740时，它的风格有何不同？也许你想看看CSS媒体类型？
所以你问过切换课程。问题是，右/向下箭头位于单击节点的后代。我已经成功了，见下文。
$(document).ready(function() {
// set a default minimum width
var minWidth = 740;
// Is the viewport no wider than my min?
if ($(window).width() < minWidth) {
// If so, go ahead and hide all submenus
var myMenu = $(".panel");
myMenu.find("li:has('ul')").on("click", function(evt) {
// click on any LI that contains
// nested UL's, show the child ul
// and hide all of this LI's sibling's
// children's nested ULs.
evt.preventDefault();
evt.stopPropagation();
$(this).children("span")
.toggleClass("glyphicon glyphicon--chevron-right")
.toggleClass("glyphicon glyphicon-chevron-down");
$(this).children("ul").slideToggle();
$(this).siblings(":has(ul:visible)")
.children("span")
.toggleClass("glyphicon glyphicon--chevron-right")
.toggleClass("glyphicon glyphicon-chevron-down");
$(this).siblings().find("ul:visible").slideUp();
}).prepend("<span class='glyphicon glyphicon-chevron-right'>").children("ul").hide();
// The above line actually hides all the nested
// ULs initially.
}
})ul {
list-style-type: none;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<!-- <div class="nav-item-container"> -->
<ul>
<li class="panel-title panel-heading head-category">
<span><a href="http://www.yahoo.com">Products</a></span>
<a data-toggle="collapse" href="#menuPanelListGroup">
<i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
</a>
<ul class="list-group collapse out" id="menuPanelListGroup">
<li class="list-group-item children-list-group">
<a data-toggle="collapse" href="#menuPanelSubListGroup">
<span>Item 1</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</a>
<ul id="menuPanelSubListGroup" class="collapse children-list-sublink">
<li class="list-group-item children-list-group">
<span><a href="#">SubItem 1</a></span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 2</span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 3</span>
</li>
</ul>
</li>
<li class="list-group-item children-list-group">
<span>Item 2</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 3</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 4</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 5</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
</ul>
<!-- </div> -->
</li>
<li class="panel-title panel-heading head-category">
<span><a href="#">Latin Markets</a></span>
<a data-toggle="collapse" href="#menu2PanelListGroup">
<i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
</a>
<ul class="list-group collapse out" id="menu2PanelListGroup">
<li class="list-group-item children-list-group">
<a data-toggle="collapse" href="#menu2PanelSubListGroup">
<span>Item 1</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</a>
<ul id="menu2PanelSubListGroup" class="collapse children-list-sublink">
<li class="list-group-item children-list-group">
<span><a href="#">SubItem 1</a></span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 2</span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 3</span>
</li>
</ul>
</li>
<li class="list-group-item children-list-group">
<span>Item 2</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 3</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 4</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 5</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
</ul>
<!-- </div> -->
</li>
<li class="panel-title panel-heading head-category">
<span><a href="#">Shows</a></span>
<a data-toggle="collapse" href="#tradeshowPanelListGroup">
<i class="pull-right fa fa-chevron-down" aria-hidden="true"></i>
</a>
<ul class="list-group collapse out" id="tradeshowPanelListGroup">
<li class="list-group-item children-list-group">
<a data-toggle="collapse" href="#tradeshowPanelSubListGroup">
<span>Item 1</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</a>
<ul id="tradeshowPanelSubListGroup" class="collapse children-list-sublink">
<li class="list-group-item children-list-group">
<span><a href="#">SubItem 1</a></span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 2</span>
</li>
<li class="list-group-item children-list-group">
<span>SubItem 3</span>
</li>
</ul>
</li>
<li class="list-group-item children-list-group">
<span>Item 2</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 3</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 4</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
<li class="list-group-item children-list-group">
<span>Item 5</span>
<b class="pull-right glyphicon glyphicon-chevron-right"></b>
</li>
</ul>
</li>
</ul>
</div>