JQuery hiding dropdown menu

Question

I have a following problem with my code. While I clicking on nested elements of "element2" in my menu, my drop-down menu is hiding. I want to hide this only while I click on "element2" not subelements. Here is the link for effect that I want: 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>

Nope · Accepted Answer · 2017-05-26 11:33:14Z

You can update your JavaScript to only respond when the bound element is clicked by checking the current target:

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>

But now when I embed "Element 2" text in span i can't open drop-down menu clicking this.

moathdev · Accepted Answer · 2017-05-26 11:36:48Z

1

use div tag :

<div id=“div”>

</div>

<script>

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

</script>

answered May 26, 2017 at 11:36

moathdev

2563 silver badges10 bronze badges

Collectives™ on Stack Overflow

JQuery hiding dropdown menu

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related