javascript - 自定义 Accordion 问题

Question

我试图突出显示选定的 Accordion 选项卡背景，它的工作，但选定的 Accordion 选项卡的 CSS 不会改变选择任何其他选项卡

代码和CSS如下

   <script type="text/javascript">

        $(document).ready(function ($) {
            $('#accordion').find('.accordion-toggle').click(function () {

                //Expand or collapse this panel
                $(this).next().slideToggle('slow');
                $(this).css({ "background-color": "#191970" });

                //Hide the other panels
                $(".accordion-content").not($(this).next()).slideUp('slow');
                $(".accordion-content").not($(this)).css({ "background-color": "#E4E4E4" });

            });
        });

    </script>
   <style type="text/css">
            #accordion{width:20%; float:left; height:100%; overflow:hidden;  }
          .accordion-toggle {cursor: pointer; background:#E4E4E4; line-height:35px; font-size:1em; padding-left:0.3em; color:#0f5595;  }
          .accordion-toggle img{ padding-right:0.4em; padding-top:0.3em;}
          .accordion-content {display: none; float:none;  }
          .accordion-content.default {display: list-item; }
          .accordion-content.contact{ display: list-item;}
    </style>

根据我的说法，问题在于以下声明:

$(".accordion-content").not($(this)).css({ "background-color": "#E4E4E4" });

他的html是

         <div id="accordion">

                <h4 class="accordion-toggle"> <img src="images/link.gif" /> first element</h4>
                    <div class="accordion-content default">
                        <ul>
                            <li><a href="index.html"> Security</a></li>
                            <li><a href="index.html"> Security</a></li>
                        </ul>
                    </div>

              <h4 class="accordion-toggle"> <img src="images/link.gif" /> second element</h4>
                    <div class="accordion-content">
                    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
                    </div>
</div>

Js Fiddle link

Answer 1

重复使用$(this)不是一个好主意；尝试以下操作:

$this = $(this);

然后使用您的 $this 变量。

此外，您将点击绑定(bind)到 (".accordion-toggle") 元素，因此 $(this) 是 .accordion-toggle。但是随后您检查一组 $(".accordion-content").not($(this))。这几个类是在同一组元素上吗？