使用 jQuery 的 Span 类 - 显示隐藏答案

【问题标题】：Span class with jQuery - show hide使用 jQuery 的 Span 类 - 显示隐藏
【发布时间】：2015-06-10 09:45:46
【问题描述】：

我对 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/

【问题讨论】：

请验证答案。如果输出不正确，请详细说明您的问题...
非常感谢，Rino Raj。

标签： javascript jquery html css show-hide

【解决方案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/

【讨论】：

哇，非常感谢你，Rino Raj。太好了，对我帮助很大。再次感谢您，祝您有愉快的一天。

【解决方案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();
  });

});

【讨论】：

也非常感谢你，sanchahous。祝你有美好的一天。