Question

我遇到了使用jQuery的span类的问题。

我需要什么：

点击按钮蓝色菜单，我需要显示蓝色跨度矩形和红色矩形隐藏。
点击按钮红色菜单我需要显示红色跨度矩形和蓝色矩形隐藏。
两个菜单何时关闭，我需要显示两个跨度矩形，红色和蓝色。

如果我通过点击相同的按钮关闭菜单，效果很好。但是，如果当您打开菜单时，单击第二个按钮，矩形跨度工作不好。从那时起，两个矩形都完全错了。

我在使用jQuery的代码中有一个错误

<div class="all">
    <a href="#" class="menu">
        Menu 1
        <span class="rectangle"></span>
    </a>

    <a href="#" class="menu2">
        Menu 2
        <span class="rectangle2"></span>
    </a>

    <div class="sliding">
        <table id="tables">
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="sliding2">
        <table id="tables2">
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

jQuery(document).ready(function () {
    jQuery(".sliding, .sliding2").hide();
    jQuery(".menu, .menu2").show();
    jQuery(".all a .rectangle2, .all a .rectangle").show();

    jQuery(".menu").click(function () {
        jQuery(".sliding, .all a .rectangle2").toggle();
        jQuery(".sliding2").hide();
    });

    jQuery(".menu2").click(function () {
        jQuery(".sliding2, .all a .rectangle").toggle();
        jQuery(".sliding").hide();
    });    
});

.sliding {
    background-color: blue;
    display: none;
    padding: 20px
}
.menu {
    padding: 0 20px;
    color: blue;
    width: 200px
}
.menu2 {
    color: red;
}
.sliding2 {
    background-color: red;
    display: none;
    padding: 20px
}
.all a .rectangle {
    border-style: solid solid none;
    border-width: 10px;
    margin: 0 10px
}
.all a .rectangle2 {
    border-style: solid solid none;
    border-width: 10px;
    margin: 0 10px
}

请帮帮我。祝你有愉快的一天。

http://jsfiddle.net/k3y4114o/1/

Answer 1

请尝试：

    jQuery(".menu").click(function () {
        jQuery(".sliding, .all a .rectangle2").toggle();
        if(jQuery('.sliding').is(':visible')) {
            jQuery(".rectangle2").hide();
            jQuery(".rectangle").show(); 
        }
        jQuery(".sliding2").hide(); 
    });

    jQuery(".menu2").click(function () {
        jQuery(".sliding2, .all a .rectangle").toggle();
        if(jQuery('.sliding2').is(':visible')) {
            jQuery(".rectangle").hide();
            jQuery(".rectangle2").show();
        }
        jQuery(".sliding").hide();
    });

http://jsfiddle.net/Rino_Raj/k3y4114o/3/

Answer 2

我更改了你的脚本，试试这个： jQuery（document）.ready（function（）{ jQuery（＆＃34; .sliding，.sliding2＆＃34;）。hide（）; jQuery（＆＃34; .menu，.menu2＆＃34;）。show（）; jQuery（＆＃34; .all a .rectangle2，.all a .rectangle＆＃34;）。show（）;

jQuery(".menu").click(function () {
    jQuery(".sliding, .all a .rectangle2").toggle(); 
    jQuery(".sliding2").hide(); 
    jQuery(".rectangle").show(); 
    jQuery(".rectangle2").hide(); 
   });

jQuery(".menu2").click(function () {
    jQuery(".sliding2, .all a .rectangle").toggle();
    jQuery(".sliding").hide();
    jQuery(".rectangle").hide();
    jQuery(".rectangle2").show();
  });

}）;

使用jQuery的span类 - 显示隐藏

2 个答案: