4

我有一个页面，其中有两个相同尺寸的 div 恰好一个放在另一个上方，每个都包含一个 jqueryui 手风琴。一个 div 是可见的，另一个是隐藏的。还有两个href。第一个 href 应该显示第一个 div 并隐藏第二个（这是默认状态），第二个 href 应该显示第二个 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 页面。我将其保留在此处，因为它似乎不相关，除了在这里的某个地方我看到一个项目讨论了淡入淡出效果（用于显示和关闭对话框）如何与显示/隐藏有一些问题）。

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

也许我的解释也过于明确或冗长，如果是这样，我深表歉意。

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

感谢所有给我一些建议的人

4

2 回答 2

1

你的代码应该是这样的

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

    $( "#vpadvisors" ).click(function(){
       $( "#vpteamcontainer" ).hide();
       $( "#vpadvisorscontainer" ).show();
    });
});
于 2012-11-15T05:26:17.883 回答
0

我让它与这个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();
}));
于 2012-11-15T04:38:32.070 回答