4

同じサイズの 2 つの div が上下に正確に配置されたページがあり、それぞれに jqueryui アコーディオンが含まれています。1 つの div が表示され、もう 1 つが非表示になります。また、2 つの href があります。最初の href は最初の div を表示して 2 番目を非表示にし (デフォルトの状態)、2 番目の href は 2 番目の 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 パラメーターの 1 つが、表示/非表示できない 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;
}

そのため、2 つのアコーディオン (#accordion と #accordion2) を呼び出す JavaScript があり、それは問題なく動作し、その後に、リンクがクリックされたときに 2 つの div を表示および非表示にしようとする JavaScript が続きます: (コードは簡潔にするために編集されています) :

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

注: 2 つの個別の href リンクから呼び出されるダイアログ ボックス (jqueryui ダイアログ) 内の iframe に html ページを表示する 2 つのモーダル ダイアログを表示するための JavaScript もあります。関連性がないように見えるので、ここでは省略しましたが、ここのどこかで、rthe フェード効果 (ダイアログの表示と閉じに使用される) が表示/非表示に問題があることを議論している項目を見たことを除いて)。

結果: 1- アコーディオンが対応する div に生成され、期待どおりに機能します。2- リンクの表示/非表示は何もしません。3- and の代わりに and と同様に and を使用しようとしましたが、何.css("display, none")をしても、どのオプションも機能しません。.css("display. block").css("visibility, visible").css("visibility, hidden")show()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 に答える