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 {}
ul.wpsc_top_level_categories li ul li a span {background:none !important;}
span.collapse-arrow {cursor:pointer;background:red;width:10px;height:9px;float:right;margin-top:5px;}

jQuery

$('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>');

ここに私のフィドルがありますhttp://jsfiddle.net/nwbY7/23/

  1. 赤い四角だけがドロップダウン スライドをアクティブにできます
  2. リンクは URL にリダイレクトする必要があります (どこにも行きません)
  3. html 構造は絶対に変更しないでください

私は本当に助けが必要です... :-(

4

2 に答える 2

0

クリック イベント ハンドラーが原因で、ブラウザーは < a > タグで通常行うことを実行できません: 新しい URL に移動します。

e.preventDefault()すべてのリンククリックに対して発生しています。折りたたみ矢印のクリックを処理している場合にのみ、これを行う必要があります。これはjsfiddleでうまくいくようでした：

$('div.wpsc_categorisation_group ul li ul').slideUp().hide();
$('.wpsc_categories').on('click', 'a', function(e) {

if (e.target.className == 'collapse-arrow') { // Trigger only
                                              // If clicked on span
    $(this).closest('ul').find('ul').slideToggle();
    e.preventDefault();  // Prevent the Default Action
}

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

私がしたことは、ブロックe.preventDefault()の内側に移動したことだけです。if

于 2012-10-27T02:43:04.323 に答える
0

みんなありがとう、私はそれを機能させました....唯一の問題は、折りたたんだときにプラス記号をマイナス記号に変更したいということです。

作業サンプルはこちらhttp://jsfiddle.net/nwbY7/25/

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 class="wpsc_second_level_categories">
                <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 class="wpsc_second_level_categories">
                <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

span.CatExpander {float:right;cursor:pointer;}
.wpsc_second_level_categories {display:none;}

Javascript

//<![CDATA[
(function($)
{
$(document).ready(function()
{
$(".wpsc_top_level_categories > li:has(ul)").prepend("<span class=\"CatExpander\">[+]</span>");

$(".CatExpander").click(function()
{
$(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
return false;
}).eq(0).addClass("CatExpanded").end().slice(1).siblings("ul").hide();
});
})(jQuery);
//]]>
于 2012-10-27T02:58:20.480 に答える