Question

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

嗨当我点击我的元素子主题时，它并没有显示我不知道我是否做了一些错误的代码，当我刷新我的页面时，它刚刚出现并且有时会消失喜欢眨眼。任何专业的网络开发都能帮助我解决这个问题吗？非常感谢你。（我很抱歉我的英语不好） ****所有我想要的是我希望我的subTopics显示或下拉单击而不是通过悬停****

Answer 1

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

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

的jQuery

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

});

Answer 2

即使没有jQuery，您的代码也能正常运行。您只能使用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

2 个答案: