在点击正文或其他 div 时隐藏一些 div答案

【问题标题】：Hide some div on click on body or on other div在点击正文或其他 div 时隐藏一些 div
【发布时间】：2013-03-02 00:23:10
【问题描述】：

<div id="container">
    <div class='sub1'></div>
    <div class='sub2'></div>
    <div class='part1'></div>
     <div class='part2'></div>
 </div>

工作就像... 点击sub1将隐藏sub1和sub2将显示，与part1和part2相同

我需要的是...单击 sub1 后（现在显示 sub2 并隐藏 sub1），如果我单击正文或 part2 ，我需要隐藏 sub2 并显示 @ 987654331@

part1 和 part2 也一样。

我尝试了不同的方式使用 jQuery，但我找不到一个好的解决方案...

请帮忙:)

【问题讨论】：

贴出你试过的代码？
你试过什么？没有任何代码，很难看出你的代码哪里出错了。
它的代码量很大，有更多的内部标签，那就是我添加 d 示例

标签： javascript jquery html performance jquery-ui

【解决方案1】：

您对单击“正文”的用例的描述非常含糊，但根据您的解释，我认为您需要切换“状态”。即如果一个被隐藏，它应该被显示，反之亦然。这就是我实现的，但如果你需要它会很容易改变。

这里是小提琴：

http://jsfiddle.net/UNCru/1/

还有代码：

$(".sub1, .sub2, .part1, .part2").click(function(event){
    subClicked($(this));
    event.stopPropagation();
});

$("body").click(bodyClicked);

function subClicked($this)
{
    var $target;
    if ($this.attr("class").indexOf("1") != -1)
    {
        // part1 or sub1
        $target = $('.' + $this.attr("class").replace("1","2"));
    }
    else
    {
        // part2 or sub1
        $target = $('.' + $this.attr("class").replace("2","1"));
    }

    $target.show();
    $this.hide();
}

function bodyClicked()
{
    $(".sub1, .sub2, .part1, .part2").each(function(){
            if ($(this).is(":visible"))
                $(this).hide();
            else
                $(this).show();
    });
}

【讨论】：

【解决方案2】：

如果您要与 div 共享 css 规则，我建议您使用 ID 来识别它们，那么您可以这样做：

jQuery(document).ready(function() // document is loaded and ready
{
   $("#sub1").click(function() 
   {
      $("#sub2").stop(true, true); // stop all animations this is to help minimize 
      $("#sub1").stop(true, true); // overload because of constant clicking
      $("#sub2").show();  $("#sub1").hide() // show div 2 and hide div 1
   })
});

更改其他 div 的相同代码只是将标识符（它是 $("") 语法中的那个）更改为 part1 或 part2。您可以对类执行相同操作，但标识符以“。”开头而不是“#”，但使用类标识符执行此操作将使该类的所有 div 隐藏或显示。

【讨论】：

【解决方案3】：

使用 javascript 很简单...

http://jsfiddle.net/MpLFZ/

<div id="sub1" onclick="document.getElementById('sub2').style.display = 'block'; document.getElementById('sub1').style.display = 'none';">sub1</div><br />
<div id="sub2" onclick="document.getElementById('sub1').style.display = 'block'; document.getElementById('sub2').style.display = 'none';" style="display:none;">sub2</div>

【讨论】：