显示一个div，显示列表项上的下拉内容，单击使用javascript

时间：2016-01-28 15:36:07

标签： javascript jquery html css drop-down-menu

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

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

现在，我正在尝试弄清楚当一个具有＆＃39;下拉列表的li项目时，如何制作下拉内容div节目。单击而不是使用悬停伪类。

5 个答案:

答案 0 :(得分：2)

我认为你的所有物品都不需要相同的子菜单。首先，您必须正确构建html，以便为每个元素设置子菜单。然后，您只需使用jQuery和单击事件创建下拉效果。

＆＃13;
＆＃13; 
$(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
    });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您的.dropdown-content应该是.primaryNav-item.dropdown的孩子，这样您就可以使用jQuery的点击方法来引用this变量点击的父级来切换（或{{3 } {} .dropdown-content孩子。

<div class="dropdown">
  <a class="navItem">Dropdown</a>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

$(".dropdown").click(function() {    
  $(".dropdown-content", this).stop().slideToggle();
});

这是一个有效的演示：slide toggle stop方法可以防止切换功能过载。

答案 2 :(得分：0)

你可能会做这样的事情：

<div class="dropdown-content" onclick="ShowMe();">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
</div>

JavaScript：

function ShowMe() { 
    document.getElementByClassName("dropdown-content").style.display = 'block';
}

答案 3 :(得分：0)

为此，您必须使用JavaScript代码而不仅仅是CSS来显示它。你在标签中加入了jQuery，所以我假设可以提供使用它的示例代码。

$(".dropdown").click(function() {
    $(this).children(".dropdown-content").show();
});

此代码表示，单击下拉元素时，在其中找到dropdown-content元素，然后取消隐藏它。

答案 4 :(得分：0)

使用JavaScript是这里的方法。例如，以下代码适合您的目的：

$(document).on("click", ".dropdown-content", function() { 
     $(this).children(".dropdown-content").show(); 
}

然后，您可以添加第二个类或属性，以便您知道它正在显示。如果该属性存在并再次单击它，则可以使用.hide（）隐藏它并删除该类或属性。

我希望有所帮助！

相关问题
最新问题