Question

我目前正在开发一个小应用程序，我正在尝试在多页结构化页面上实现下拉菜单。菜单是基于javascript的，我基本上将菜单粘贴到每个页面上。问题是，一旦我通过下拉菜单输入＃page2或＃page3，脚本就会停止工作，当我点击它时菜单不会响应。

我想这里的问题是;如何使脚本不仅可以在#page 1上工作，还可以在＃page2和第3页上工作？

这是HTML：

<body>

<div data-role="page" id="page1">

<div id="push"><a href="" id="info_drop"></a></div>

<div id="dd" data-position="fixed" class="wrapper-dropdown-5"><li>Om oss</li> 
</div>

<div id="panel">

    <ul class="dropdown">
    <a href="#"><li>Om festivalen</li></a>
    <a href="#page2" rel="external"><li>Praktisk info</li></a>
    <a href="#"><li>Administrasjon</li></a>
    <a href="#"><li>Frivillig</li></a>
    <a href="#"><li>Samarbeidspartnere</li></a>
    </ul>


    </div>


<div id="info_content">

sup

</div>
</div>


<div data-role="page" id="page2">

-- same html as in page 1 ----

</div>


<script src="dropdown_js.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2
/jquery.min.js">
</script>

</body>

javascript：

$(function (){
$(".wrapper-dropdown-5").bind('click tap', function() {
$("#panel").stop().slideToggle("fast");
$("#info_content").stop().animate({"margin-top":"10px"}, "fast")
}, function() {
$("#info_content").stop().animate({"margin-top":"0"}, "slow")
$("#panel").stop().slideToggle("fast");
});
});

编辑：这是我的css：

.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 12px 15px;

/* Styles */
background: #fff;
border-radius: 5px;
}



.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;

/* Styles */
background: #fff;

/* Hiding */
max-height: 0;
overflow: hidden;
}

.wrapper-dropdown-5 .dropdown li {
padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px 0;
}



.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}


/* Active state */

.wrapper-dropdown-5.active .dropdown {
max-height: 400px;
}

Answer 1

所有HTML元素ID都需要不同。在我看来，就像你在所有3页上都有相同的ID panel和info_content一样;浏览器只关注每个中的第一个，即第1页上的那些。（实际上，这种情况下的行为可能与浏览器有关。）因此，您需要为它们提供不同的ID。当然，您还需要区分.wrapper-dropdown-5元素。

如何让javascript在每个页面上运行

1 个答案: