jQuery plugin to implement accordion secondary menu

This article uses a jQuery plug-in to create an accordion secondary menu for your reference. The specific content is as follows

HTML5 structure requirements:

<div id="accordion">
    <div>
        <p>First level menu</p>
        <div>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
        </div>
    </div>
    <div>
        <p>First level menu</p>
        <div>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
        </div>
    </div>
    <div>
        <p>First level menu</p>
        <div>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
        </div>
    </div>
</div>

Use jQuery at the end of the body to find the parent tag and call the plugin function

<script type="text/javascript">
    $("#accordion").accordion();
</script>

Import the accordion-css.css file and the accordion-jQuery.js file

accordion-css.css:

*{padding: 0;margin: 0;}
#accordion{
    width: 200px;
    margin: 0 auto;
    border: 1px solid whitesmoke;
}
#accordion .list1>p{
    padding: 10px 15px;
    font: 20px "Microsoft YaHei";
    font-weight: bold;
    background: whitesmoke;
    cursor: pointer;
}
#accordion .list1>p:hover{
    background: lightskyblue;
}
#accordion .list2>p{
    padding: 10px 25px;
    font: 15px "Microsoft YaHei";
    cursor: pointer;
}
#accordion .list2>p:hover{
    background: lightskyblue;
}
#accordion .list2{
    display: none;
}

accordion-jQuery.js:

jQuery.fn.accordion = function(){
    var $accordion = $(this);
    $accordion.children().addClass("list1");
    $accordion.children().children("div").addClass("list2");
    $accordion.on("click",".list1>p",function(){
        if($(this).next(".list2").is(":visible")){
            $(this).next(".list2").slideUp();
        }else{
            $(this).next(".list2").slideDown();
            $(this).parent().siblings(".list1").children(".list2").slideUp();
        }
    });
}

Result:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery Easyui usage (I) foldable panel layout accordion menu
jQuery makes an awesome accordion menu
Implementing accordion menu based on Jquery code
jQuery multi-level accordion menu example explanation
Expand and collapse the navigation menu in accordion mode based on jQuery
A sentence based on JQuery to create an accordion menu
jQuery implements simple accordion menu effect example
jQuery implements accordion effect of drop-down menu
Based on jQuery to achieve accordion menu, hierarchical menu, top menu, seamless scrolling effect
Jquery vertical multi-level accordion menu with source code download

<<: Notes on using the blockquote tag

>>: Universal solution for MySQL failure to start under Windows system