Question

我正在尝试突出显示所选择的手风琴选项卡背景，它的工作情况，但选定的手风琴选项卡的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变量。

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

Answer 2

我想我现在得到你了，你需要重置jQuery中的背景颜色：

 $(document).ready(function ($) {
        $('#accordion').find('.accordion-toggle').click(function () {
            //stop us reusing $(this) as it's not efficent
            var $this = $(this);

            //First things first, reset all the accordion's colours back to default
            $("#accordion .accordion-toggle").css('background-color', '#E4E4E4');
            //Expand or collapse this panel
            $this.next().slideToggle('fast');

            //now set only the correct one to the new colour
            $this.css( "background-color", "#191970" );

            //Hide the other panels
            $(".accordion-content").not($this.next()).slideUp('fast');
        });
    });

Updated fiddle

定制手风琴问题

2 个答案: