-4 
<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隐藏）后，如果我单击 body 或 in part2，我需要隐藏sub2并显示sub1

与part1和相同part2。

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

请帮忙 ：）

4

3 回答 3

2

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

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();
    });
}
于 2013-03-02T00:46:20.487 回答
1

如果您要与 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 隐藏或显示。

于 2013-03-02T00:39:38.047 回答
0

用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>
于 2013-03-02T00:58:00.340 回答