Question

我是JS的新手，我正在创建一个动态菜单，这很简单，实际上就是这个菜单：

http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3

事情是，如果我使用这个确切的代码一切正常，但如果我取出nav li { display: inline-block; text-align: center; } nav li a { padding-left: 15px; ** add padding to both sides padding-right: 15px; display: inline; } nav li :hover { background-color: brown; color: white; }部分并用生成它的JS替换它（以便将来生成动态菜单）它停止工作，一切都显示（甚至子菜单），但不能将它们向上滑动。我之前从未做过这样的事情，你有什么建议吗？

Answer 1

<强> jsBin demo

^{（请不要使用“accordi A n”......这只是uff nghhh：）}
所以演示中的 accordiOn 使用ID accordion，如

<div id="accordion">

根本不使用ID！ - 使用类！

<div class="accordion"><!-- menu here bla bla --></div>

而不是jQuery：

/*jQuery time*/
$(document).ready(function(){

    // $(".accordion h3").click(function(){ NO! use dynamic click delegation
    $(document).on("click", ".accordion h3", function(){
        //slide up all the link lists
        // $("#accordian ul ul").slideUp(); Wrong. Reference to this!
        $(this).closest(".accordion").find("ul ul").slideUp();
        //slide down the link list below the h3 clicked - only if its closed
        if(!$(this).next().is(":visible")) {
            $(this).next().slideDown();
        }
    });

});

以上代码也适用于动态生成的手风琴，因为我们使用.on()方法将click事件委托给现有元素，但也分配给未来元素。

我如何使用生成的HTML（使用JS）与另一个JS脚本？

1 个答案: