Question

我正在尝试构建自定义手风琴类型导航菜单，其中当我们单击父列表项时，将显示其嵌套的ul li项。当我们再次点击其父项目时隐藏它们。但是创建问题的一件事是我还想关闭或隐藏任何先前打开的ul列表项（如果有的话）。我不知道如何让它变得完美 - 我的解决方案无法正常工作。

我的代码是：

HTML

<div id="header_wrapper"> <!-- HEADER WRAPPER STARTS -->

    <div id="header"> <!-- HEADER STARTS -->

        <div id="logo"> <!-- LOGO STARTS -->
            <a href="#"><img src="images/logo.png" alt="logo" class="responsive" /></a>
        </div> <!-- LOGO ENDS -->

    <div id="nav_wrapper"> <!-- NAVIGATION WRAPPER STARTS -->

            <div id="menu_icon_wrapper">
                <div id="menu_icon"></div>
            </div>

        <div id="nav_bar"> <!-- NAVIGATION BAR STARTS -->

            <ul id="nav"> <!-- NAVIGATION STARTS -->
                <li><a href="#">Item 1</a>
                    <ul>
                        <li><a href="#">Sub Item 1</a></li>
                        <li><a href="#">Sub Item 2</a></li>
                        <li><a href="#">Sub Item 3</a></li>
                        <li><a href="#">Sub Item 4</a></li>
                        <li><a href="#">Sub Item 5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="active">Item 2</a></li>
                <li><a href="#">Item 3</a>
                    <ul>
                        <li><a href="#">Sub Item 1</a></li>
                        <li><a href="#">Sub Item 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a>
                    <ul>
                        <li><a href="#">Sub Item 1</a></li>
                        <li><a href="#">Sub Item 2</a></li>
                        <li><a href="#">Sub Item 3</a></li>
                    </ul>
                </li>
            </ul> <!-- NAVIGATION ENDS -->

        </div> <!-- NAVIGATION BAR ENDS -->

    </div> <!-- NAVIGATION WRAPPER ENDS -->

    <div class="clearfix"></div>

    </div> <!-- HEADER ENDS -->

</div> <!-- HEADER WRAPPER ENDS -->

CSS

#header_wrapper {
    background-color:red;
    width:100%;
}

#header {
    max-width:1000px;
    margin:0 auto;
    padding:10px 0;
    position:relative;
}

#logo {
    /*float:left;*/
}


#nav_bar {
    position:relative;
    z-index:99999;
    background-color:#F34744;
}

#nav_bar ul li a {
    background-color:#F34744;
    border-top:1px solid #EE312D;
    padding:6px 12px;
    display:block;
    color:#FFFFFF;
    font-size:14px;
    outline:none;
    text-align:left;
}

#nav_bar ul li a:hover,
#nav_bar ul li a.active {
    background-color:#EE312D;
}

#nav_bar ul li ul li a {
    text-indent:25px;
    background-color:#F45d5A;
}

#nav_bar ul li ul {
    display:none;
}

#nav_bar ul li ul.inner_dd {
    display:block;
}

/* main nav */
ul#nav {
    display:none; /* visibility will be toggled with jquery */
}

/* menu icon */
#menu_icon_wrapper {
    position:relative;
    height:24px;
}

#menu_icon {
    background-color:blue;
    background-repeat:no-repeat;
    width:45px;
    height:45px;
    position:absolute;
    top:-21px;
    right:-1px;
    cursor:pointer;
}

#menu_icon:hover {
    /*background-color:#dd7d06;*/
}

#menu_icon.active {
    /*background-color:#EE312D;*/
}

@media only screen and (min-width:900px) {

#header_wrapper {
    border-top:5px solid yellow;
}

#nav_wrapper {
    position:absolute;
    bottom:40px;
    right:0;
}

#menu_icon_wrapper {
    display:none; /* hide menu icon initially */
}

/* Ensure #nav is visible on desktop version */
ul#nav {
    display:block !important;
}

#nav_bar ul li {
    float:left;
    position:relative;
    margin-right:35px;
}

#nav_bar ul li a
{
    border-top:none;
    background-color:transparent;
    padding:0;
    color:#666666;
    display:block;
    font-size:15px;
}

#nav_bar ul li:last-child {
    margin-right:0;
}

#nav_bar ul li a.active,
#nav_bar ul li a:hover {
    color:#000000;
    background-color:transparent;
}

#nav_bar ul li a.active {
    /*border-bottom:2px solid #EE312D;*/
}

/* dropdown menu */

#nav_bar ul li ul {
    display:none;
    position:absolute;
    left:0;
    top:24px;
    border:1px solid #666666;
    background-color:#F8F8F8;
}

/* Display dropdown menu on hover */

#nav_bar ul li ul.inner_dd {
    display:none;
}

#nav_bar ul li:hover ul {
    display:block; 
}

#nav_bar ul li ul li {
    float:none;
    z-index:99999;
    margin-right:0;
}

#nav_bar ul li ul li a {
    text-indent:inherit;
    background-color:transparent;
    display:block;
    white-space:nowrap;
    padding:0 10px;
    font-size:14px;
}

#nav_bar ul li ul li a:hover {
    background-color:#EEEEEE;
}

}

的jQuery

// Toggle navigation
$("#menu_icon").on("click", function(){
    $("ul#nav").slideToggle();
    $(this).toggleClass("active");
});

// Show/hide dropdown menu
$("ul#nav li a").click(function(e){
    if($(this).closest("li").children("ul").length != 0)
    {
        if($(window).innerWidth() < 900)
        {
            e.preventDefault();
            $(this).siblings('ul').toggleClass('inner_dd');
        }
    }
});

Here's我迄今为止在工作行动中的工作代码。

在演示中，当您点击蓝色方块时，会出现下拉菜单。我想＆＃34;项目1＆＃34;当我们打开＆＃34;项目3＆＃34;反之亦然。其他菜单项的操作类似。

Answer 1

我会这样做：

var nav = $("ul#nav"),
  subNavs = nav.children('li').children('ul');

// Toggle navigation
$("#menu_icon").on("click", function() {
  nav.slideToggle();
  $(this).toggleClass("active");
});

// Show/hide dropdown menu
$("ul#nav li a").click(function(e) {
  var anchor = $(this),
    subNav = anchor.next("ul");

  if (subNav.length != 0 && $(window).innerWidth() < 900) {
    e.preventDefault();
    subNav.toggleClass('inner_dd');
    subNavs.not(subNav).removeClass('inner_dd');
  }
});

	#header_wrapper {
	  background-color: red;
	  width: 100%;
	}
	
	#header {
	  max-width: 1000px;
	  margin: 0 auto;
	  padding: 10px 0;
	  position: relative;
	}
	
	#logo {
	  /*float:left;*/
	}
	/* -----------------------------------------------------------------------------
	
		TOP NAVIGATION
	  
	----------------------------------------------------------------------------- */
	
	#nav_bar {
	  position: relative;
	  z-index: 99999;
	  background-color: #F34744;
	}
	
	#nav_bar ul li a {
	  background-color: #F34744;
	  border-top: 1px solid #EE312D;
	  padding: 6px 12px;
	  display: block;
	  color: #FFFFFF;
	  font-size: 14px;
	  outline: none;
	  text-align: left;
	}
	
	#nav_bar ul li a:hover,
	#nav_bar ul li a.active {
	  background-color: #EE312D;
	}
	
	#nav_bar ul li ul li a {
	  text-indent: 25px;
	  background-color: #F45d5A;
	}
	
	#nav_bar ul li ul {
	  display: none;
	}
	
	#nav_bar ul li ul.inner_dd {
	  display: block;
	}
	/* main nav */
	
	ul#nav {
	  display: none;
	  /* visibility will be toggled with jquery */
	}
	/* menu icon */
	
	#menu_icon_wrapper {
	  position: relative;
	  height: 24px;
	}
	
	#menu_icon {
	  background-color: blue;
	  background-repeat: no-repeat;
	  width: 45px;
	  height: 45px;
	  position: absolute;
	  top: -21px;
	  right: -1px;
	  cursor: pointer;
	}
	
	#menu_icon:hover {
	  /*background-color:#dd7d06;*/
	}
	
	#menu_icon.active {
	  /*background-color:#EE312D;*/
	}
	/* -----------------------------------------------------------------------------

	MEDIA QUERIES FOR A RESPONSIVE LAYOUT (MOBILE FIRST)
  
----------------------------------------------------------------------------- */
	/* -----------------------------------------------------------------------------

	LARGER THAN 900
  
----------------------------------------------------------------------------- */
	
	@media only screen and (min-width:900px) {
	  #header_wrapper {
	    border-top: 5px solid yellow;
	  }
	  #nav_wrapper {
	    position: absolute;
	    bottom: 40px;
	    right: 0;
	  }
	  #menu_icon_wrapper {
	    display: none;
	    /* hide menu icon initially */
	  }
	  /* Ensure #nav is visible on desktop version */
	  ul#nav {
	    display: block !important;
	  }
	  #nav_bar ul li {
	    float: left;
	    position: relative;
	    margin-right: 35px;
	  }
	  #nav_bar ul li a {
	    border-top: none;
	    background-color: transparent;
	    padding: 0;
	    color: #666666;
	    display: block;
	    font-size: 15px;
	  }
	  #nav_bar ul li:last-child {
	    margin-right: 0;
	  }
	  #nav_bar ul li a.active,
	  #nav_bar ul li a:hover {
	    color: #000000;
	    background-color: transparent;
	  }
	  #nav_bar ul li a.active {
	    /*border-bottom:2px solid #EE312D;*/
	  }
	  /* dropdown menu */
	  #nav_bar ul li ul {
	    display: none;
	    position: absolute;
	    left: 0;
	    top: 24px;
	    border: 1px solid #666666;
	    background-color: #F8F8F8;
	  }
	  /* Display dropdown menu on hover */
	  #nav_bar ul li ul.inner_dd {
	    display: none;
	  }
	  #nav_bar ul li:hover ul {
	    display: block;
	  }
	  #nav_bar ul li ul li {
	    float: none;
	    z-index: 99999;
	    margin-right: 0;
	  }
	  #nav_bar ul li ul li a {
	    text-indent: inherit;
	    background-color: transparent;
	    display: block;
	    white-space: nowrap;
	    padding: 0 10px;
	    font-size: 14px;
	  }
	  #nav_bar ul li ul li a:hover {
	    background-color: #EEEEEE;
	  }
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
  <!-- HEADER WRAPPER STARTS -->

  <div id="header">
    <!-- HEADER STARTS -->

    <div id="logo">
      <!-- LOGO STARTS -->
      <a href="#"><img src="images/logo.png" alt="logo" class="responsive" /></a>
    </div>
    <!-- LOGO ENDS -->

    <div id="nav_wrapper">
      <!-- NAVIGATION WRAPPER STARTS -->

      <div id="menu_icon_wrapper">
        <div id="menu_icon"></div>
      </div>

      <div id="nav_bar">
        <!-- NAVIGATION BAR STARTS -->

        <ul id="nav">
          <!-- NAVIGATION STARTS -->
          <li><a href="#">Item 1</a>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
              <li><a href="#">Sub Item 3</a></li>
              <li><a href="#">Sub Item 4</a></li>
              <li><a href="#">Sub Item 5</a></li>
            </ul>
          </li>
          <li><a href="#" class="active">Item 2</a></li>
          <li><a href="#">Item 3</a>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
              <li><a href="#">Sub Item 3</a></li>
            </ul>
          </li>
        </ul>
        <!-- NAVIGATION ENDS -->

      </div>
      <!-- NAVIGATION BAR ENDS -->

    </div>
    <!-- NAVIGATION WRAPPER ENDS -->

    <div class="clearfix"></div>

  </div>
  <!-- HEADER ENDS -->

</div>
<!-- HEADER WRAPPER ENDS -->

Answer 2

你可以做到这一点：

$("ul#nav li a").click(function(e){
    if($(this).closest("li").children("ul").length != 0)
    {
        if($(window).innerWidth() < 900)
        {
            e.preventDefault();
            $('ul').removeClass('inner_dd');
            $(this).siblings('ul').toggleClass('inner_dd');
        }
    }
});

你可以为每个'ul'元素添加一个类。这允许您从所需的'ul'元素中删除inner_dd类：

e.g：

<ul class="myclass">...</ul>

JS：

$('.myclass').removeClass('inner_dd');

小提琴： https://jsfiddle.net/4t006rpg/2/

Answer 3

你需要从其他li元素中删除类inner_dd添加这段代码来做同样的事情

   $('ul').removeClass('inner_dd')

完整的jquery代码

            // Toggle navigation
    $("#menu_icon").on("click", function(){
        $("ul#nav").slideToggle();
        $(this).toggleClass("active");
    });

    // Show/hide dropdown menu
    $("ul#nav li a").click(function(e){
        if($(this).closest("li").children("ul").length != 0)
        {
            if($(window).innerWidth() < 900)
            {
                e.preventDefault();
      $('ul').removeClass('inner_dd')
                $(this).siblings('ul').toggleClass('inner_dd');
            }

        }
    });

<强> JSFIDDLE

如何在jQuery中关闭/隐藏以前打开的ul li？

3 个答案: