2

下の画像のように、2 つのサイドバー (スライダー) があります。btn1をクリックすると、サイド パネル 1 が開きます。btn2サイドパネル 2をクリックすると開きます。これで結構です。btn1をクリックすると、サイド パネル 2 が開いている場合は閉じてサイド パネル 1 が開きます。サイド パネル 1 のbtn2についても同じです。これも問題なく、正常に動作します。今はクローズボタンを追加したくありません。そのため、サイド パネル 1 を開いてbtn1をクリックすると、閉じる必要があると判断しました。私は多くのことを試みますが、うまくいきません。

ここに画像の説明を入力

HTML

    <div class="demo">
    <div class="demo-box">
      <div class="demo-buttons iconbar" > <img src="images/btn_overly.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow1"> <img src="images/btn_factfile.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow2"> </div>
      <div class="demo-box-panel sidepanel1 " id="sidepanel1"  ><!-- style = "-webkit-overflow-scrolling: touch; overflow: scroll;" -->
    <div id="scroll" style="height: 100%;">
      <div>
        <div class = "btnclose sidemenuhide1"> <img src="images/close.png" width="26" height="26" border="0" alt=""> </div>
        <div class = "btnhead ">
          <h3>Title</h3>
        </div>
        <div class="pageContent">
          test
        </div>
      </div>
    </div>
      </div>
      <div class="demo-box-panel sidepanel2" id="sidepanel2">
       <div class = "btnclose sidemenuhide2"> <img src="images/close.png" width="26" height="26" border="0" alt=""> </div>
    <div id="" style = "height:100%;">
      <div> 
         test
      </div>
    </div>
      </div>
    </div>
  </div>

CSS

    /*@import url("../vendor/yui-cssreset.css");
@import url("./generic.css");*/
.demo a{cursor:pointer;color:white;display:block;}
/*.demo a:hover{text-decoration:underline}*/
.demo .demo-box{width:250px;height:700px;position:absolute;margin:0;padding:0;text-align:center; right:-1px; top:5px;}
.demo .demo-box .slidescrollpanel-wrap{ }
.demo .demo-box .slidescrollpanel-content{text-align:left;border:1px solid #000;background:#313831;position:relative;}
.demo .demo-box .slidescrollpanel-content pre > code{}
.demo .demo-box .demo-buttons{margin-top:25px; height:100%}
.demo .demo-box .demo-buttons button{margin:.5em;width:150px;max-width:40%}
.navtitle{cursor:pointer;color:white;display:block;height:30px;}

Jクエリ

$(function(){
            var $panel1 = $('.sidepanel1').slideScrollPanel({
                direction: 'right'
            });
            $('.sidemenushow1').click(function(){
                $panel2.data('slidescrollpanel').hidePanel();
                $panel1.data('slidescrollpanel').showPanel();
            });
            $('.sidemenuhide1').click(function(){
                $panel1.data('slidescrollpanel').hidePanel();
            });


            var $panel2 = $('.sidepanel2').slideScrollPanel({
                direction: 'right'
            });
            $('.sidemenushow2').click(function(){
                $panel1.data('slidescrollpanel').hidePanel();
                $panel2.data('slidescrollpanel').showPanel();
            });
            $('.sidemenuhide2').click(function(){
                $panel2.data('slidescrollpanel').hidePanel();
            });


        });
4

1 に答える 1

3

開いているか閉じているかを示す各サイドバーの変数を作成し、各アクションでそれらを更新できます。次に、これらのボタンのいずれかを押すたびに、ペインが既に開いているかどうかを確認します。はいの場合は、閉じます。そうでない場合は、開きます。

変数の代わりに、サイドバーを開いてこのクラスの存在を確認するときにサイドバーにクラスを追加することもできます。これは、jQuery の .addClass() メソッドを介して行うことができます。

例：

JavaScript コードで、変数を作成します (任意の名前を付けます)。

var isPanel1Open = false;
var isPanel2Open = false;

次に、パネルを非表示/表示する関数を編集します。

$('.sidemenushow1').click(function(){

    $panel2.data('slidescrollpanel').hidePanel();
    isPanel2Open = false;

    if (isPanel1Open){
        $panel1.data('slidescrollpanel').hidePanel();
        isPanel1Open = false;
    } else {
        $panel1.data('slidescrollpanel').showPanel();
        isPanel1Open = true;
    }

});

$('.sidemenushow2').click(function(){
    $panel1.data('slidescrollpanel').hidePanel();
    isPanel1Open = false;

    if (isPanel2Open){
        $panel2.data('slidescrollpanel').hidePanel();
        isPanel2Open = false;
    } else {
        $panel2.data('slidescrollpanel').showPanel();
        isPanel2Open = true;
    }
});
于 2013-09-18T06:36:22.320 に答える