用jQuery单击时，我的subTopics没有显示

Question

 $(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); });

 body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } #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; } #subTopics { position: absolute; margin-top: 10px; width: 100%; left: 0; } #subTopics ul { margin: 0; padding: 0; } #subTopics li { display: block; } #subTopics a { text-align: left; } #column1, #column2, #column3, .columns { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } #main-menu li:hover { text-decoration: underline; }

 <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> <li><a href="">example3</a></li> <li><a href="">example4</a></li> <li><a href="">example5</a></li> <li><a href="">example6</a></li> <li><a href="">example7</a></li> <li><a href="">example8</a></li> <li><a href="">example9</a></li> <li><a href="">example10</a></li> </ul> </div> <div id="column2" class="columns"> <ul> <li><a href="">example11</a></li> <li><a href="">example12</a></li> <li><a href="">example13</a></li> <li><a href="">example14</a></li> <li><a href="">example15</a></li> <li><a href="">example16</a></li> <li><a href="">example17</a></li> <li><a href="">example18</a></li> <li><a href="">example19</a></li> <li><a href="">example20</a></li> </ul> </div> <div id="column3" class="columns"> <ul> <li><a href="">example21</a></li> <li><a href="">example22</a></li> <li><a href="">example23</a></li> </ul> </div> </div> </li> <li><a href="">Jobs</a></li> <li><a href="">Markets</a></li> </ul> </div> </nav> <script src="jquery.js"></script> <script src="index.js"></script> <script> </script> </body> </html>

Hi When i clicked on my element subtopics it doesn't show up i don't know if i have done some wrong code and when i refresh my page it's just happened appear and disappear onetime like blinking.Can any professional web development help me out about this? 嗨，当我单击我的元素子主题时，它不显示我不知道我是否做了一些错误的代码，当我刷新页面时，它只是一次出现而消失，就像眨眼一样。任何专业的网站开发都可以帮我吗对这个？ thank you very much. 非常感谢你。 (I'm sorry for my poor english) ****All i want is i want my subTopics show up or dropdown by clicking not by hover**** （我为我的英语不好而感到抱歉）****我想要的是我希望我的subTopics通过单击而不是悬停来显示或下拉****

Answer 1

HTML 的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" class="classSubTopics">
                    <div id="column1" class="columns">
                        <ul>
                            <li><a href="">example1</a></li>
                            <li><a href="">example2</a></li>
                            <li><a href="">example3</a></li>
                            <li><a href="">example4</a></li>
                            <li><a href="">example5</a></li>
                            <li><a href="">example6</a></li>
                            <li><a href="">example7</a></li>
                            <li><a href="">example8</a></li>
                            <li><a href="">example9</a></li>
                            <li><a href="">example10</a></li>
                        </ul>
                    </div>

                    <div id="column2" class="columns">
                        <ul>
                            <li><a href="">example11</a></li>
                            <li><a href="">example12</a></li>
                            <li><a href="">example13</a></li>
                            <li><a href="">example14</a></li>
                            <li><a href="">example15</a></li>
                            <li><a href="">example16</a></li>
                            <li><a href="">example17</a></li>
                            <li><a href="">example18</a></li>
                            <li><a href="">example19</a></li>
                            <li><a href="">example20</a></li>
                        </ul>
                    </div>

                    <div id="column3" class="columns">
                        <ul>
                            <li><a href="">example21</a></li>
                            <li><a href="">example22</a></li>
                            <li><a href="">example23</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="">Jobs</a></li>
            <li><a href="">Markets</a></li>
        </ul>
    </div>
</nav>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>

</script>
</body>
</html>

CSS 的CSS

#subTopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}

jQuery jQuery的

$(document).ready(function () {
$("#mainTopics").click(function (event) {
    $(".classSubTopics").hide();
    event.preventDefault()
    $("#subTopics").show("slow");
});

});

Answer 2

Your code will work even without jQuery . 即使没有jQuery您的代码也可以使用。 you can do this with css only. 您只能使用css执行此操作。

 body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } #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; } #subTopics { position: absolute; padding-top: 10px; width: 100%; left: 0; display: none; } #subTopics ul { margin: 0; padding: 0; } #subTopics li { display: block; } #subTopics a { text-align: left; } #column1, #column2, #column3, .columns { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } #main-menu li:hover { text-decoration: underline; } #main-menu li:hover #subTopics { display: block; }

 <!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> <li><a href="">example3</a></li> <li><a href="">example4</a></li> <li><a href="">example5</a></li> <li><a href="">example6</a></li> <li><a href="">example7</a></li> <li><a href="">example8</a></li> <li><a href="">example9</a></li> <li><a href="">example10</a></li> </ul> </div> <div id="column2" class="columns"> <ul> <li><a href="">example11</a></li> <li><a href="">example12</a></li> <li><a href="">example13</a></li> <li><a href="">example14</a></li> <li><a href="">example15</a></li> <li><a href="">example16</a></li> <li><a href="">example17</a></li> <li><a href="">example18</a></li> <li><a href="">example19</a></li> <li><a href="">example20</a></li> </ul> </div> <div id="column3" class="columns"> <ul> <li><a href="">example21</a></li> <li><a href="">example22</a></li> <li><a href="">example23</a></li> </ul> </div> </div> </li> <li><a href="">Jobs</a></li> <li><a href="">Markets</a></li> </ul> </div> </nav> <script src="jquery.js"></script> <script src="index.js"></script> <script> </script> </body> </html>

用jQuery单击时，我的subTopics没有显示

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-05-05 12:35:12

解决方案2
0 2018-05-05 12:37:25

用jQuery单击时，我的subTopics没有显示

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-05-05 12:35:12

解决方案2 0 2018-05-05 12:37:25

解决方案1
0 已采纳 2018-05-05 12:35:12

解决方案2
0 2018-05-05 12:37:25