-3

見やすくするために一口サイズのチャンクに分割されたドロップダウン価格リストがあります。いくつかのサービスが提供されており、一部のサービスはサブカテゴリに分類されています。ユーザーは、小さな矢印が下向きのボタンをクリックすると、サブカテゴリの別のレベルのボタンは、slideToggle が表示されます。矢印ボタンは下部にあるため、準備ができたらサブカテゴリを非表示にできます.

サブカテゴリを非表示にするときは矢印を下向きから、表示するときは上向きに変更したいと考えていました。pngサブカテゴリを非表示/表示するときに状態間で矢印を切り替えるコマンド/コマンドセットが必要です。

.arrows矢印は、 divの背景画像としてこの HTML 内にあります。

<div class="morebutton" id="firstarrow">

    <div class="arrows">

    </div>

</div>

これはCSSです：

.morebutton{
width:220px;
height:8px;
border:outset 1px #ddd;
/*margin-bottom:5px;*/
margin-left:auto;
margin-right:auto;
margin-top:0px;
background:#ddd;
border-radius:25px;
cursor:pointer;
overflow:hidden;
}

.morebutton:hover{
background:#eee;
height:15px;        
}

.arrows{
width:20px;
height:15px;
margin:0px auto;
background:url(images/morearrows.png) no-repeat 0px 0px;
}

これは、要素の現在の jQuery です。

$("#firstarrow").click(function(){
    $("#londonmore").slideToggle(100);
});
//this reveals the sub-categories in a table called #londonmore

これが私が試したことです（上記の関数内で）：

$(this).toggle( 
    function(){ 
        $(".arrows").css({"background-position":"0px"}); 
    },  
    function(){ 
        $(".arrows").css({"background-position":"10px"}); 
});

背景の位置が変化する量で遊んでみましたが、矢印を少し動かすだけで、最初のクリックでは移動せず、希望の位置に移動しません。サブカテゴリの非表示に戻ります。

サブカテゴリ非表示。 下向きの矢印。

サブカテゴリを表示しています。 矢印が上を向いている必要があります。

4

2 に答える 2

2

まだコードを投稿していないため、この回答は少し一般的である必要がありますが、.slideToggle()で取得するコールバックがあります。それを使用して.css()を実行します

現在の状態を確認するだけでよいので、右矢印を設定します。

例えば：

    $('#button1').slideToggle('slow',function() {
        if ( ... ) {
            $('#arrow1').css('background-position','?px ?px');
        } else {
            $('#arrow1').css('background-position','?px ?px');
        }
    });

空白を埋める必要があります-または別の方法でコールバックを実装することもできますが、slideToggle が起動したときに css を変更したい場合は、コールバックを使用するのが最善の方法です。

于 2012-09-24T23:21:27.647 に答える
1

経由で背景を直接変更することはありませんjQuery.css。代わりに、CSS クラスを切り替えるだけです。マークアップがどのように見えるかはわかりませんが、例のために次のようにします。

<div class="expandable">
  <a href="#" class="expandable-expander">
    <span class="arrows">This is our arrow element</span>
  </a>
  <div class="expandable-content">
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
  </div>
</div>

次に、この css を実行できます。

.arrows {
  /* this is the default state and as the default we want the arrow closed
     so the bg position 0 0 is for the closed state */
  width:20px;
  height:15px;
  margin:0px auto;
  display: inline-block;
  background: #f00 url(images/morearrows.png) no-repeat 0 0;
  text-indent: -999em;
}
.expandable {
  width:220px;
}
.expandable .expandable-expander {
   display: block;
   background: #ccc;
   width:220px;
   height:8px;
   border:outset 1px #ddd;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   background:#ddd;
   border-radius:25px;
   cursor:pointer;
   overflow:hidden;
}

.expandable .expandable-content {

   /* content is hidden at first unles .expandable is also .open */
    display: none;
}

.expandable.open .expandable-content {
   display: block;
}

.expandable .expandable-expander:hover {
   background:#eee;
   height:15px;
}

.expandable.open .expandable-expander .arrows {
   background-position: 0 -10px;
   /* only change the background position because everything else is set up */
    background-color: #0f0;
}

最後に、jQuery ベースの js:

$(function(){
   $('.expandable .expandable-expander').click(function (e) {
       var $this = $(this),
           $container = $this.closest('.expandable'),
           $content = $container.find('.expandable-content');
       e.preventDefault();

       $content.slideToggle(100, function () {
           $container.toggleClass('open');
       });
   });
});

このようにして、自己完結型の構造に基づいて構成することにより、このコードを任意のページで 1 回実行するだけで済み、適合するクラス構造を使用している限り問題ありません。何も変更せずに、さまざまな場所で再利用できます。

働くフィドル

注意点...DOMの状態を確認できない限り、トグル機能を避けて長いバージョンを使用することをお勧めします。何かが同期しなくなった場合、他のものを閉じているときに開いているものを切り替えている可能性があります。ただし、この場合は問題になるとは思いません。

于 2012-09-25T19:33:29.743 に答える