JQuery隐藏下拉菜单

时间：2017-05-26 11:27:55

标签： jquery html css drop-down-menu

我的代码存在以下问题。当我在菜单中单击“element2”的嵌套元素时，我的下拉菜单正在隐藏。 我只想在点击“element2”而不是子元素时隐藏它。 以下是我想要的效果链接：http://urban.nyasha.me/html/form-basic.html 

  $(".sidebar-nav>li").has("ul").click(
            function(e){
                    $(this).toggleClass("toggled");
                    $(this).children("ul").toggleClass("toggled");
            }    
   );
/* line 14, ../sass/style.scss */
body {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  background-color: #FFF;
  margin: 0;
  padding: 0;
}
/* line 20, ../sass/style.scss */
body #wrapper {
  padding-left: 250px;
}
/* line 7, ../sass/style.scss */
body #wrapper {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
/* line 23, ../sass/style.scss */
body #wrapper.toggled {
  padding-left: 80px;
}
/* line 25, ../sass/style.scss */
body #wrapper.toggled #sidebar-wrapper {
  width: 80px;
}
/* line 32, ../sass/style.scss */
body #wrapper #sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 250px;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  overflow: hidden;
  background: #34495E;
}
/* line 7, ../sass/style.scss */
body #wrapper #sidebar-wrapper {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
/* line 43, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #E4F1FE;
}
/* line 48, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li {
  text-indent: 40px;
  line-height: 40px;
}
/* line 51, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li:hover {
  background-color: #2C3E50;
  cursor: pointer;
}
/* line 55, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #23384D;
}
/* line 62, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul li a {
  text-decoration: none;
  line-height: 5px;
  color: #E4F1FE;
}
/* line 67, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul li:hover {
  background: #23384D;
}
/* line 69, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul li:hover a {
  color: #FFF;
}
/* line 75, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul.toggled {
  display: block;
}
/* line 79, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li.toggled {
  background-color: #2C3E50;
}
/* line 82, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li.sidebar-brand {
  padding: 15px 0;
  text-transform: uppercase;
  font-size: 1.09em;
}
/* line 86, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li.sidebar-brand:hover {
  background-color: #34495E;
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<body>
   <div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                Logo
            </li>
            <li>
                Element1
            </li>
            <li>
                Element2
                <ul>
                    <li>
                        <a href="#">Sublement1</a>
                    </li>
                    <li>
                        <a href="#">Subelement2</a>
                    </li>
                </ul>
            </li>
            <li>
               Element 3
            </li>
            <li>
                Element4
            </li>
        </ul>
    </div>
    <div id="page-content-wrapper">
      
    </div>
</div>

    </body>

2 个答案:

答案 0 :(得分：1)

您可以将JavaScript更新为仅在通过检查当前目标点击绑定元素时进行响应：

if (e.target == this) {
  $(this).toggleClass("toggled");
  $(this).children("ul").toggleClass("toggled");
}


$(".sidebar-nav>li").has("ul").click(
  function(e) {
    if (e.target == this) {
      $(this).toggleClass("toggled");
      $(this).children("ul").toggleClass("toggled");
    }
  }
);
/* line 14, ../sass/style.scss */

body {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  background-color: #FFF;
  margin: 0;
  padding: 0;
}


/* line 20, ../sass/style.scss */

body #wrapper {
  padding-left: 250px;
}


/* line 7, ../sass/style.scss */

body #wrapper {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}


/* line 23, ../sass/style.scss */

body #wrapper.toggled {
  padding-left: 80px;
}


/* line 25, ../sass/style.scss */

body #wrapper.toggled #sidebar-wrapper {
  width: 80px;
}


/* line 32, ../sass/style.scss */

body #wrapper #sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 250px;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  overflow: hidden;
  background: #34495E;
}


/* line 7, ../sass/style.scss */

body #wrapper #sidebar-wrapper {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}


/* line 43, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #E4F1FE;
}


/* line 48, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li {
  text-indent: 40px;
  line-height: 40px;
}


/* line 51, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li:hover {
  background-color: #2C3E50;
  cursor: pointer;
}


/* line 55, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li ul {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #23384D;
}


/* line 62, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li ul li a {
  text-decoration: none;
  line-height: 5px;
  color: #E4F1FE;
}


/* line 67, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li ul li:hover {
  background: #23384D;
}


/* line 69, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li ul li:hover a {
  color: #FFF;
}


/* line 75, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li ul.toggled {
  display: block;
}


/* line 79, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li.toggled {
  background-color: #2C3E50;
}


/* line 82, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li.sidebar-brand {
  padding: 15px 0;
  text-transform: uppercase;
  font-size: 1.09em;
}


/* line 86, ../sass/style.scss */

body #wrapper #sidebar-wrapper .sidebar-nav li.sidebar-brand:hover {
  background-color: #34495E;
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>

  <body>
    <div id="wrapper">
      <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
          <li class="sidebar-brand">
            Logo
          </li>
          <li>
            Element1
          </li>
          <li>
            Element2
            <ul>
              <li>
                <a href="#">Sublement1</a>
              </li>
              <li>
                <a href="#">Subelement2</a>
              </li>
            </ul>
          </li>
          <li>
            Element 3
          </li>
          <li>
            Element4
          </li>
        </ul>
      </div>
      <div id="page-content-wrapper">

      </div>
    </div>

  </body>

答案 1 :(得分：1)

使用div标签：

<div id=“div”>

</div>

<script>

(“#div”).show("slow");
(“#div”).hide("slow");

</script>
相关问题
最新问题