因此,我最近使用了 w3school include html,这样我就不必将相同的 div 复制粘贴到我的所有页面。
首先,我将它用于页眉和页脚,它使用了一些 CSS 样式,没有问题,工作完美。
但后来,我尝试再次将它用于我的下拉导航栏,其中包含一些 javascript,HTML 包含得很好,但我放置的 javascript 不起作用! javascript 没有问题,当我不使用包含 HTML 时它工作正常。这是代码
$('#leftDrop1').on('click', function() {
if ($('#sub1').css('display') == 'block') {
$('#sub1').hide()
} else {
$("#sub1").show()
}
})
$('#leftDrop2').on('click', function() {
if ($('#sub2').css('display') == 'block') {
$('#sub2').hide()
} else {
$("#sub2").show()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<div w3-include-html="dropdown.html"></div>
这是 dropdown.html 里面的内容
<div class="col-lg-3">
<ul id="dropKiri">
<li id="leftDrop1"><a class="dropIcon"><i class="fa fa-caret-right" aria-hidden="true"></i></a>Category 1</li>
<div id="sub1"><ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul></div>
<li id="leftDrop2"><a class="dropIcon"></a><i class="fa fa-caret-right" aria-hidden="true"></i></a>Category 2</li>
<div id="sub2"><ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul></div>
<li style="list-style-type: none;">Category 3</li>
</ul>
</div>
我不知道如何在代码片段上放置 2 个 html 页面,如果这有点令人困惑,我很抱歉
最佳答案
您需要委托(delegate)您的事件,因为 w3school 脚本使用 ajax 并将新项目添加到 dom
$('body').on('click','#leftDrop1',function() {
if ($('#sub1').css('display') == 'block') {
$('#sub1').hide()
} else {
$("#sub1").show()
}
})
$('body').on('click','#leftDrop2',function() {
if ($('#sub2').css('display') == 'block') {
$('#sub2').hide()
} else {
$("#sub2").show()
}
})
关于javascript - w3school 包括 HTML,javascript 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38005810/