javascript - 使用javascript显示在列表项点击时显示下拉内容的div

标签 javascript jquery html css drop-down-menu 

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      padding-top: 50px;
      padding-bottom: 20px;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>

<body>
  <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


  <!--MAIN CONTENT GOES HERE -->

  <style>
    /* main menu */
    .mainNav {
      margin: 0;
      padding: 0;
      min-height: 100px;
      text-align: left;
      white-space: normal;
      width: 368px;
      display: block;
      cursor: default;
    }
    .mainNav-item {
      display: inline-block;
      vertical-align: top;
    }
    .mainNav-item a {
      text-decoration: none;
      color: black;
    }
    .mainNav-item a:hover {
      text-decoration: none;
      color: black;
    }
    .mainNav-item-tile {
      display: block;
      margin: 6px 5px 6px 5px;
      padding: 0;
      text-align: center;
      line-height: normal;
      position: relative;
      text-decoration: none;
      width: 110px;
      height: 110px;
      background: transparent;
      border-width: 0;
      font-size: 14px;
      outline-color: #e7e7e7;
      background-color: #e7e7e7;
    }
    .mainNav-item-tile:hover {
      outline-color: #ccc;
      background-color: #ccc;
    }
    .mainNav-item-tile-img {
      display: block;
      padding: 15px;
      margin-left: auto;
      margin-right: auto;
    }
    .popover {
      max-width: 600px;
      width: auto;
    }
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
      position: relative;
      display: inline-block;
    }
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      left: 80px;
      top: 20px;
    }
    /* Links inside the dropdown */
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #f1f1f1
    }
  </style>



  <div style="float: left; cursor: pointer; margin: 13px 15px 0 0">
    <img data-toggle="popover" data-placement="bottom" onmouseover="this.src='http://placehold.it/32x32'" onmousedown="this.src='http://placehold.it/32x32'" onmouseout="this.src='http://placehold.it/32x32'" src="http://placehold.it/32x32" />

    <div id="popover_content_wrapper" style="display: none;">
      <div>
        <ul class="mainNav">
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem1</span>
            </a>

            <div id='content1' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem2</span>
            </a>

            <div id='content2' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem3</span>
            </a>

            <div id='content3' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem4</span>
            </a>

            <div id='content4' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
          <li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom">
            <a ID="navItem" runat="server" class="mainNav-item-tile">
              <img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" />
              <span>MainMenuItem5</span>
            </a>

            <div id='content5' class='dropdown-content'>
              <a href='#'>SubMenuItem1</a>
              <a href='#'>SubMenuItem2</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>





  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


  <script type="text/javascript">
    $(document).ready(function() {
      $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
          return $('#popover_content_wrapper').html();
        }
      });

      $('html').on('click', function(e) {
        $('[data-toggle="popover"]').each(function() {
          //the 'is' for buttons that trigger popups
          //the 'has' for icons within a button that triggers a popup
          if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
          }
        });
      });


      $(".dropdown").click(function(e) {
        e.preventDefault();
        var $this = $(this).children(".dropdown-content");
        $(".dropdown-content:visible").not($this).slideToggle(200); //Close submenu already opened
        $this.slideToggle(200); //Open the new submenu
      });
    });
  </script>


</body>

</html>

我的目标是在单击其中一个 li 元素时显示下拉内容。我正在使用这个 example on w3schools作为基础。这个例子的唯一问题是它在悬停时显示下拉内容。

现在我想弄清楚如何在单击具有“下拉”类的 li 项而不是使用悬停伪类时显示下拉内容 div。

最佳答案

我不认为您的所有元素都需要相同的子菜单。因此，首先，您必须正确构建您的 html，以便为每个元素创建一个子菜单。然后您可以使用 jQuery 和点击事件简单地创建您的下拉效果。

$(document).ready(function(){
    $(".dropdown").click(function(e){
        e.preventDefault();
        var $this = $(this).children(".dropdown-content");
        $(".dropdown-content:visible").not($this).slideToggle(200); //Close submenu already opened
        $this.slideToggle(200); //Open the new submenu
    });
});
nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

nav ul li {
    display:inline-block;
    position:relative;
}

nav ul li a {
  color: #fff;
  background: #28AADC;
  text-decoration: none;
  cursor: pointer;
  padding: 10px 20px;
  display: block;
  width: 80px;
}

nav ul li a:hover {
  background: #00648C;
}

ul.dropdown-content {
  position: absolute;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    <ul>
        <li class="dropdown">
            <a href="#">Nav 1</a>
            <ul class="dropdown-content">
                <li><a href="#">Nav 1.1</a></li>
                <li><a href="#">Nav 1.2</a></li>
                <li><a href="#">Nav 1.3</a></li>
                <li><a href="#">Nav 1.4</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Nav 2</a>
            <ul class="dropdown-content">
                <li><a href="#">Nav 2.1</a></li>
                <li><a href="#">Nav 2.2</a></li>
                <li><a href="#">Nav 2.3</a></li>
                <li><a href="#">Nav 2.4</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Nav 3</a>
            <ul class="dropdown-content">
                <li><a href="#">Nav 3.1</a></li>
                <li><a href="#">Nav 3.2</a></li>
                <li><a href="#">Nav 3.3</a></li>
                <li><a href="#">Nav 3.4</a></li>
            </ul>
        </li>
    </ul>
</nav>

关于javascript - 使用javascript显示在列表项点击时显示下拉内容的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35065674/

上一篇：css - 谷歌浏览器无法读取背景图像

下一篇：html - CSS - 计算减去动态图像高度的百分比

相关文章：

javascript - 如何使用 Javascript 将来自输入文本框的输入填充到 div 中？

javascript - 更改选择选项时尝试使用 jQuery 替换 HTML 文本

javascript - 如何滑动div，勾选输入复选框

javascript - jquery width 返回一个函数

java - 使用 jQuery ajax 的 RESTful Web 服务

html - 一行 Bootstrap 中的 td 内容

选择选项的 Javascript 属性

javascript - 如何在 Angular 5 中从父组件继承子组件的 css 样式

JavaScript-不会滚动到页面底部？

javascript - 使用 MySQL 填充 jQuery DataTable

©2024 IT工具网  联系我们