跨越 class 与 jQuery - 显示隐藏

Question

我对跨度 class 和 jQuery 有问题。

我需要的：

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

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

我在 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(文档).ready(函数(){ 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(".rectangle").show(); 
    jQuery(".rectangle2").hide(); 
   });

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

});

跨越 class 与 jQuery - 显示隐藏

Span class with jQuery - show hide

html

javascript

css

jquery

show-hide