Question

我有一个页面有两个相同尺寸的div正好一个放在另一个上面，每个div都包含一个jqueryui手风琴。一个div是可见的，另一个是隐藏的。还有两个href。第一个href应显示第一个div并隐藏第二个div（这是默认状态），第二个href应显示第二个div并隐藏第一个div。这样，用户可以点击任一链接并看到一个手风琴或另一个。

以下是相关的html：

<html><head>

<link href="jquery/css/vp/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" type="text/css" />
<script src="jquery/js/jquery-1.8.2.js"></script>
<script src="jquery/js/jquery-ui-1.9.1.custom.min.js"></script>
<script src="jquery/development-bundle/external/jquery.bgiframe-2.1.2.js"></script>



</head>
<body>

<div id="pagewrapper" >

  <div id="mainteam" >

   <!-- First DIV with an accordion inside -->
   <div id="vpteamcontainer"> 
       <div id="accordion">
         <h3>Section 1</h3>
         <div><p>Section 1 Content</p></div>
         <h3>Section 2</h3>
         <div><p>Section 2 Content</p></div>
     </div>
   </div>

   <!-- Second DIV with another accordion inside -->
   <div id="vpadvisorscontainer"> 
       <div id="accordion2">
         <h3>Section 1-2</h3>
         <div><p>Section 1-2 Content</p></div>
         <h3>Section 2-2</h3>
         <div><p>Section 2-2 Content</p></div>
     </div>
   </div>



<!-- Div containing the two href links to show/hide the above divs -->

    <div id="somediv">
      <ul class = "someULclass">
        <li ><a href="#" id="vpteam" class="somelinkclass">Show First div and Hide Second div</a></li>
        <li ><a href="#" id="vpadvisors" class="somelinkclass">Show Second div and Hide First div</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

以下是我所包含的上述DIVS（剥去宽度，高度，边框等）的相关CSS，因为可能其中一个父div的'css参数可能影响我无法显示/隐藏的div：

#pagewrapper {
    position:relative;
    float:none;
    margin-left:auto;
    margin-right:auto;
    display:block;
}


#mainteam {
    position:relative;
    float: left;
}

#vpteamcontainer {
    display:block;
}

#vpadvisorscontainer {
    display:none;
}

所以我有javascript调用两个手风琴（#accordion和＃accordion2，并且工作得很好，然后javascript尝试在点击链接时显示和隐藏两个div :(代码编辑试图保持它简短）：

<!-- START JQUERY accordions -->
<script type="text/javascript">
    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
    heightStyle: "fill"
        });
    });
</script>

<script type="text/javascript">
    $(function() {
        $( "#accordion2" ).accordion({
            collapsible: true,
    heightStyle: "fill"
        });
    });
</script>

<!-- END JQUERY accordions -->

<!-- START JQUERY SHOW HIDE -->

<script type="text/javascript">
$( "#vpteam" ).click(function(){
    $( "#vpteamcontainer" ).show();
    $( "#vpadvisorscontainer" ).hide();
});

$( "#vpadvisors" ).click(function(){
    $( "#vpteamcontainer" ).hide();
    $( "#vpadvisorscontainer" ).show();
});
</script>
<!-- END JQUERY SHOW HIDE -->

注意：我还有javascript来显示两个模式对话框，它们在两个单独的href链接调用的对话框（jqueryui对话框）中的iframe中显示一个html页面。我把它保留在这里，因为它看起来并不相关，除了在这里我看到一个项目讨论如何淡化效果（用于显示和关闭对话框），有一些问题与show / hide）。

结果： 1-手风琴生成相应的div并按预期工作。 2-显示/隐藏链接什么都不做。 3-我尝试过使用.css("display, none")和.css("display. block")，以及.css("visibility, visible")和.css("visibility, hidden")代替show()和hide()，无论如何我知道，我无法使用任何选项。

也许在我的解释中我也过于明确或冗长，如果是这样，我道歉。

在我写这篇文章时，我想知道问题是否与所包含的手风琴有关，或者它是否与href链接有关，以及我如何尝试执行显示和隐藏div的javascripts？

感谢任何和所有给我一些建议

Answer 1

你的代码应该是这样的

 $(function() {
    $( "#vpteam" ).click(function(){
       $( "#vpteamcontainer" ).show();
       $( "#vpadvisorscontainer" ).hide();
    });

    $( "#vpadvisors" ).click(function(){
       $( "#vpteamcontainer" ).hide();
       $( "#vpadvisorscontainer" ).show();
    });
});

Answer 2

我使用这个javascript代码。我使用on.("click")代替click。

http://jsfiddle.net/JDJpe/1/

$(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
    heightStyle: "fill"
        });
});


$(function() {
        $( "#accordion2" ).accordion({
            collapsible: true,
            heightStyle: "fill"
        });
});

$(document).on("click","#vpteam",function(){

    $( "#vpteamcontainer" ).show();
    $( "#vpadvisorscontainer" ).hide();
});

$(document).on("click","#vpadvisors",function(){

    $( "#vpteamcontainer" ).hide();
    $( "#vpadvisorscontainer" ).show();
}));

jquery hide / show两个div不起作用，或许与jqueryui手风琴有冲突？

2 个答案: