Javascript 在单击主体或其他div时隐藏某些div

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

我需要的是。。。单击sub1后，现在显示sub2并隐藏sub1，若单击body或part2，则需要隐藏sub2并显示sub1

第1部分和第2部分也一样

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

---

请帮助：

如果您要与div共享css规则，我建议您使用ID来识别它们，然后您可以执行以下操作：

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

---

更改其他div的代码相同，只是将标识符更改为$syntax中的一个，即part1或part2。可以对类执行相同的操作，但标识符以开头。如果不使用类标识符，则会使该类的所有div隐藏或显示。

您对单击主体的用例的描述非常模糊，但根据您的解释，我假设您需要切换状态。i、 e如果有一个隐藏，则应显示，反之亦然。这就是我实现的，但是如果您需要的话，很容易更改

Jfiddle这里：

以及守则：

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
   })
});

---

使用javascript很简单

---

发布你尝试过的代码？你尝试过什么？如果没有任何代码，很难看出您的代码哪里出错了。这是一个很大的代码，有更多的inneer标记，这就是我添加d示例的原因

$(".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();
    });
}

<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>