Question

您如何才能使元素子主题在点击时显示和隐藏？当我点击其他菜单或网页中的任何地方时，我也希望我的子主题隐藏，谢谢。

$(document).ready(function () {
$("#mainTopics").click(function (e) {
    e.preventDefault();
    $("#subTopics").toggle()
});

$("html").click(function (e) {
    $("#subTopics").hide();
})
});

body
{
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}

/*main-menu*/
#main-menu {
    position: relative;
}

#main-menu ul {
    margin: 0;
    padding: 0;
}

#main-menu li {
    display: inline-block;
}

#main-menu a {
    display: block;
    width: 100px;
    padding: 10px;
    border: 1px solid;
    text-align: center;
}

/*sub-topics*/
#subTopics {
    position: absolute;
    display: none;
    margin-top: 10px;
    width: 100%;
    left: 0;
}

#subTopics ul {
    margin: 0;
    padding: 0;
}

#subTopics li {
    display: block;
}

#subTopics a {
    text-align: left;
}

/*columns*/
#column1, #column2, #column3 {
    position: relative;
    float: left;
    left: 125px;
    margin: 0px 5px 0px 0px;
}

/*hover underline*/
#main-menu li:hover {
    text-decoration: underline;
}
Html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <header>

    </header>
    <nav>
        <div id="main-menu">
            <ul>
                <li><a href="">Logo</a></li>
                <li><a href="">Home</a></li>
                <li><a href="" id="mainTopics">Topics</a>
                    <div id="subTopics">
                        <div id="column1" class="columns">
                            <ul>
                                <li><a href="">example1</a></li>
                                <li><a href="">example2</a></li>
                            </ul>
                        </div>                 
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <script src="jquery.js"></script>
    <script src="index.js"></script>
    <script>

    </script>
</body>
</html>

您好，我如何使元素子主题显示和隐藏点击？当我点击其他菜单或网页中的任何地方时，我也想隐藏我的子主题，谢谢。

Answer 1

使用toggle方法从show更改为hide，反之亦然。另请注意使用preventDefault来阻止锚标记的默认行为。

要在点击任意位置时隐藏subTopics，请检查元素的可见性，然后使用相同的toggle功能。

在这种情况下，请注意使用preventDefault和stopPropagation

＆＃13;

$(document).ready(function() {
  $("#mainTopics").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("#subTopics").toggle();
  });

  $('body').on('click', function() {
    if ($("#subTopics").is(':visible')) {
      $("#subTopics").toggle();
    }
  })
});

＆＃13;

body {
  margin: 0;
}

li,
a {
  text-decoration: none;
  list-style-type: none;
  text-decoration-line: none;
  color: black;
}


/*main-menu*/

#main-menu {
  position: relative;
}

#main-menu ul {
  margin: 0;
  padding: 0;
}

#main-menu li {
  display: inline-block;
}

#main-menu a {
  display: block;
  width: 100px;
  padding: 10px;
  border: 1px solid;
  text-align: center;
}


/*sub-topics*/

#subTopics {
  position: absolute;
  display: none;
  margin-top: 10px;
  width: 100%;
  left: 0;
}

#subTopics ul {
  margin: 0;
  padding: 0;
}

#subTopics li {
  display: block;
}

#subTopics a {
  text-align: left;
}


/*columns*/

#column1,
#column2,
#column3 {
  position: relative;
  float: left;
  left: 125px;
  margin: 0px 5px 0px 0px;
}


/*hover underline*/

#main-menu li:hover {
  text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>

</header>
<nav>
  <div id="main-menu">
    <ul>
      <li><a href="">Logo</a></li>
      <li><a href="">Home</a></li>
      <li><a href="#" id="mainTopics">Topics</a>
        <div id="subTopics">
          <div id="column1" class="columns">
            <ul>
              <li><a href="#">example1</a></li>
              <li><a href="#">example2</a></li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 2

另外，您可以使用jquery .hide（）和.show（）方法

Jquery hide Show

如何通过点击jquery来隐藏元素和节目？

2 个答案: