0

HTML

<div style="border:1px solid red;width:200px;">
<div class="wpsc_categorisation_group">
    <ul class="wpsc_categories wpsc_top_level_categories">
        <li><a href="link1">main link 1</a>
            <ul>
                <li><a>test 1</a></li>
                <li><a>test 2</a></li>
                <li><a>test 3</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear_category_group"></div>
</div>
<div class="wpsc_categorisation_group">
    <ul class="wpsc_categories wpsc_top_level_categories">
        <li><a href="link2">main link 2</a>
            <ul>
                <li><a>test 1</a></li>
                <li><a>test 2</a></li>
                <li><a>test 3</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear_category_group"></div>
</div>
</div>

CSS

div.wpsc_categorisation_group ul li {position:relative;}
div.wpsc_categorisation_group ul li ul {display:none;}

ul.wpsc_top_level_categories {padding-bottom:0 !important;}
ul.wpsc_top_level_categories li {}
ul.wpsc_top_level_categories li:hover {cursor:pointer;}
ul.wpsc_top_level_categories li ul li a span {background:none !important;}
span.collapse-arrow {background:red;width:10px;height:9px;float:right;margin-top:5px;}

Javascript

jQuery('div.wpsc_categorisation_group ul li ul').slideUp().hide();
jQuery('div.wpsc_categorisation_group ul li').click(function() {
jQuery(this).parent().find('ul').slideToggle();
    });
jQuery('div.wpsc_categorisation_group ul li a').append('<span class="collapse-arrow">&nbsp;</span>');

これは私のjsfidlleサンプルです

私は本当にこれについて助けが必要です...

  1. 赤いボックスをクリックできるようにするだけで、サブはスライドダウンします
  2. また、ユーザーが開いたり閉じたりしたかどうかを覚えておく必要があるため、ページを変更するとその状態が記憶されます
  3. wpscウィジェットで編集しているため、HTMLも変更しないでください

私が得ることができるどんな助けにも本当に感謝しています... :-(

4

1 に答える 1

0

このコードを試してください..最初の要件について..

$('div.wpsc_categorisation_group ul li ul').slideUp().hide();
$('.wpsc_categories').on('click', 'a', function(e) {
    e.preventDefault();  // Prevent the Default Action
    if (e.target.className == 'collapse-arrow') { // Trigger only
                                                  // If clicked on span
        $(this).closest('ul').find('ul').slideToggle();
    }

});
$('div.wpsc_categorisation_group ul li a')
   .append('<span class="collapse-arrow">&nbsp;</span>');​

働くフィドル

クリックイベントをアンカーに委譲collapse-arrowし、class ..のスパンでクリックされた場合にのみ ul を切り替えます。

2 番目の要件は少し異なります。別のページに移動する場合は、状態を Cookie またはセッションに保存し、ページが読み込まれるたびに再読み込みできます。 3 番目-- コンテキストで HTML が変更されていない

于 2012-10-20T01:00:49.527 に答える