jquery - Showing a div that displays drop-down content on list item click using javascript

<!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=".3.6/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      padding-top: 50px;
      padding-bottom: 20px;
    }
  </style>

  <script src=".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="/">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=''" onmousedown="this.src=''" onmouseout="this.src=''" src="" />

    <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="" 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="" 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="" 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="" 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="" 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=".2.0.min.js"></script>
  <script src=".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>

<!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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      padding-top: 50px;
      padding-bottom: 20px;
    }
  </style>

  <script src="https://cdnjs.cloudflare./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./">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./jquery-2.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./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>

My goal here is to show the drop-down content when one of the li items is clicked. I am using this example on w3schools as a basis. The only problem with this example is that it displays the dropdown-content on hover.

Now I am trying to figure out how to make the dropdown-content div show when an li item with the class of 'dropdown' is clicked rather than using the hover pseudo class.

Share Improve this question edited Jan 28, 2016 at 20:03 asked Jan 28, 2016 at 15:36 Blake Rivell 13.9k33 gold badges130 silver badges261 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 3

I don't think you need the same submenu for all your items. So first, you have to properly structure your html to have a submenu for each element. Then you can simply create your drop-down effect with jQuery and a click event.

$(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./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>

Your .dropdown-content should be a child of .primaryNav-item.dropdown this will allow you to use jQuery's click method to reference the parent that was clicked by the this variable to toggle (or slide toggle) the .dropdown-content children.

<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();
});

Here is a working demo: https://jsfiddle/dqg1s9vm/38/ The stop method prevents from overloading the toggle functionality.

You might be able to do something like this:

<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';
}

For that, you'll have to show it using JavaScript code rather than just CSS. You included jQuery in your tags, so I'll assume it's okay to give example code that uses it.

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

This code says that, when a dropdown element is clicked, find the dropdown-content element inside it, and unhide it.

Using JavaScript is the way to go here. For instance, the following code would suit your purpose:

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

You could then add a second class or attribute so that you know it's being shown. If that attribute exists and you click it again, you could hide it with .hide() and remove the class or attribute.

I hope that helps!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Showing a div that displays drop-down content on list item click using javascript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)