jQuery slideToggle ULリストをチェックインしないチェックボックス

css html jquery
jQuery slideToggle ULリストをチェックインしないチェックボックス

一連のネストされた<ul>をスライドできるようにするために、いくつかの単純なjQueryを使用しています

以下のjQueryがあります。

    $(document).ready(function () {
        $('.toggle li:has(ul)').click(function (event) {
            $(this).css('list-style-type', $(this).children().is(':hidden') ? 'circle' : 'square')
            $(this).children().slideToggle('fast')
            return false
        })

        .css({ cursor: 'pointer', 'list-style-type': 'circle' })
        //show to start with
        .children().show()

        $('li:not(:has(ul))').click(function (event) { return false })
    })

これは私のHTMLに適用されます:

    Toggle

    Item 1
    Item 2

            Item 2.1
            Item 2.2




    Item 1
    Item 2


                Red (86)

                Yellow (86)

                Green (173)

両方のリストは期待どおりにスライドしますが、2番目のリストのチェックボックスはチェックしません。 何も起こりません。

jQueryのクリックイベントと関係があると思いますが、修正方法はわかりません。

私はいくつかのCSSを使用しています(これが原因ではないことはかなり確かです)cssは主にチェックボックスを含むリストにアイコン/スタイルタイプが表示されるのを防ぎます。

    ul { list-style-type: circle; margin-left: 10px; margin-top: 10px; }
    .checkboxes ul { margin-left: 0px; list-style-type: none; }
    ul a { font-weight: normal; text-decoration: none; }
    ul a:hover { text-decoration: underline; }

これを行うより良い方法があれば、私はすべて耳です

  0  0


ベストアンサー

変化する

 $('li:not(:has(ul))').click(function (event) { return false })

to

 $('li:not(:has(ul))').click(function (event) {
  event.stopPropagation();
 }) ;

ベントハンドラーでreturn falseの使用を停止する必要がある理由については、この記事を確認してください。

記事からの抜粋:

__
falseを返すことは実際に行うことですまず、falseを返すことは、実際に呼び出すときに3つの非常に別個のことを行うことです。

1.event.preventDefault(); + 2.event.stopPropagation(); + 3.コールバックの実行を停止し、呼び出されるとすぐに戻ります。
__

3


タイトルとURLをコピーしました