显示/隐藏jquery脚本

show/hide jquery script

本文关键字：脚本 jquery 隐藏 显示      更新时间：2023-09-26

我有show|hide脚本。它的工作很好，但我需要修改这个脚本的html

http://jsfiddle.net/kolxoznik1/nRf5f/

就像我的模式

<!--Links-->
<div>link1</div>
<div>link2</div>

<!--Hide divs-->
<div>Show1</div>
<div>Show2</div>

我的目标是让html看起来像这样：

示例html我想做什么

    <div class="product_menu_categories">link_1</div>
    <div class="product_menu_categories">link_2</div>

     <div class="copy hide">
            <ul>
                <li><a href="#" id="prod_1" class="product_menu_link">test1</a></li>
                <li><a href="#" id="prod_2" class="product_menu_link">test2</a></li>
            </ul>
        </div>
        <div class="copy hide">
            <ul>
                <li><a href="#" id="prod_6" class="product_menu_link">test4</a></li>
            </ul>
        </div>

你是说你希望你的页面结构是：

<!-- Top Level Menus/Categories -->
<div>Menu Item #1</div>
<div>Menu Item #2</div>
<!-- Submenu Items -->
<div id="submenu-of-menu-item-1">
    <div>Item A</div>
    <div>Item B</div>
</div>
<div id="submenu-of-menu-item-2">
    <div>Item C</div>
</div>

但是在正确的菜单项下显示子菜单？

如果是，请将JSFiddle代码中的$("div.copy:eq("+i+")").toggle().siblings("div.copy").hide();更改为

$("div.copy:eq("+i+")").insertAfter(this).toggle();
$("div.copy:not(:eq("+i+"))").hide();

基本上就是在第一次单击时将子菜单移动到正确的位置，然后隐藏其余的div.copy元素。

以下是您在JSFiddle上修改的示例：http://jsfiddle.net/pjHu3/

相关文章：