如何使用onclick功能打开子菜单并使用onclick功能隐藏

时间：2018-04-20 05:48:42

标签： javascript html css css3

我做了侧边栏导航我这样做了鼠标悬停打开子菜单但是我想要点击打开并在同一个标​​签上点击以隐藏它。请检查此代码中的代码谢谢。

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
      <li><a href="">Contact us</a></li>
  </ul>
</nav>

https://codepen.io/anon/pen/erNpYG

提前致谢。

4 个答案:

答案 0 :(得分：5)

您可以使用隐藏的复选框与general sibling combinator (~)关闭并在没有javascript的情况下打开子菜单：

html, body {
    font-family: Arial, Helvetica, sans-serif;
}
.navigation {
  width: 300px;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainmenu a, .mainmenu label {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}
.mainmenu a:hover, .mainmenu label:hover {
    background-color: #C5C5C5;
}

/* hide the input */
.mainmenu input {
  display: none;
}
/* if a sibling checkbox is check show the menu */
.mainmenu input:checked ~ .submenu {
  display: block;
  max-height: 200px;
}
.submenu a, .submenu label {
  background-color: #999;
}
.submenu a:hover {
  background-color: #666;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  transition: all 0.5s ease-out;
}
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><input type="checkbox" id="products">
      <label for="products">Products</label>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
    <li><a href="">Contact us</a></li>
  </ul>
</nav>

答案 1 :(得分：1)

我希望这会帮助你。我添加了一些jquery。已使用Id作为目标子菜单。你也可以为别人重复一遍。只需要改变身份证。我也为tab创建了一个例子。点击另一个标签，其他标签菜单将关闭。

＆＃13;
＆＃13; 
$('.dropdown').click(function () {
  var target_id = $(this).attr('data-toggle');
  $('.dropdown-list').not(target_id).slideUp();
  $(target_id).slideToggle();
  $('.dropdown-list').not(target_id).parents('li, .icon-tab').removeClass('active');
  $('.dropdown').not(this).parents(' .icon-tab').removeClass('active');
  $(this).parents('li, .icon-tab').toggleClass('active');
});
＆＃13; 
html, body {
    font-family: Arial, Helvetica, sans-serif;
}

/* define a fixed width for the entire menu */
.navigation {
  width: 300px;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #C5C5C5;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
  background-color: #999;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
 
 display:none;}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a class="dropdown" data-toggle="#about">About</a>
      <ul class="submenu dropdown-list" id="about">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    
    </li>
    <li><a class="dropdown" data-toggle="#products">Products</a>
      <ul class="submenu dropdown-list" id="products">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
    <li><a href="">Contact us</a></li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

使用js

尝试此操作 

$(document).ready(function(){

        $('.dropdown').each(function() {
          var $dropdown = $(this);

          $(".dropdown-link", $dropdown).click(function(e) {
            e.preventDefault();
            $div = $(".submenu", $dropdown);
            $div.toggle();
            $(".submenu").not($div).hide();
            return false;
          });

        });

        $('html').click(function(){
          $(".submenu").hide();
        });

      });
html, body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* define a fixed width for the entire menu */
        .navigation {
          width: 300px;
        }

        /* reset our lists to remove bullet points and padding */
        .mainmenu, .submenu {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        /* make ALL links (main and submenu) have padding and background color */
        .mainmenu a {
          display: block;
          background-color: #CCC;
          text-decoration: none;
          padding: 10px;
          color: #000;
        }

        /* add hover behaviour */
        .mainmenu a:hover {
            background-color: #C5C5C5;
        }


        /* when hovering over a .mainmenu item,
          display the submenu inside it.
          we're changing the submenu's max-height from 0 to 200px;
        */

        /*
          we now overwrite the background-color for .submenu links only.
          CSS reads down the page, so code at the bottom will overwrite the code at the top.
        */

        .submenu a {
          background-color: #999;
        }

        /* hover behaviour for links inside .submenu */
        .submenu a:hover {
          background-color: #666;
        }

        /* this is the initial state of all submenus.
          we set it to max-height: 0, and hide the overflowed content.
        */
        .submenu {
          overflow: hidden;
          display: none;
          -webkit-transition: all 0.5s ease-out;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
      <ul class="mainmenu">
        <li><a href="">Home</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-link">About</a>
          <ul class="submenu">
            <li><a href="">Tops</a></li>
            <li><a href="">Bottoms</a></li>
            <li><a href="">Footwear</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-link">Products</a>
          <ul class="submenu">
            <li><a href="">Tops</a></li>
            <li><a href="">Bottoms</a></li>
            <li><a href="">Footwear</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-link">Other dropdown</a>
          <ul class="submenu">
            <li><a href="">Tops</a></li>
            <li><a href="">Bottoms</a></li>
            <li><a href="">Footwear</a></li>
          </ul>
        </li>
        <li><a href="">Contact us</a></li>
      </ul>
    </nav>

答案 3 :(得分：0)

这是使用纯JS

<强> CSS 

.subrollin{
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-in;
}
.subrollout{
  overflow: block;
  max-height: 200px;
  -webkit-transition: all 0.5s ease-out;
}

JS 

var element = document.getElementsByClassName('parentmenu')[0];
element.addEventListener("click", function(e) {
var sub = document.getElementsByClassName('submenu')[0];
  if(sub.classList.contains('subrollout')){
      sub.classList.add("subrollin");    
      sub.classList.remove("subrollout");
  } else {
      sub.classList.add("subrollout");
      sub.classList.remove("subrollin");
  }
}, false);

请参阅此代码：https://codepen.io/anon/pen/gzpaer

相关问题
最新问题