Question

<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并显示sub1

与part1和part2相同。

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

请帮助：）

Answer 1

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

Jfiddle在这里：

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

Answer 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隐藏或显示。

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

单击body或其他div时隐藏一些div

3 个答案: