Question

我有一个滑动面板的JQuery代码，我有一个切换（）来切换图像。我有一个切换停止工作的问题，切换图像。我似乎无法弄清楚为什么，它似乎是随机的。

这是jquery

        $(document).ready(function () {
        $(".accord_panel").hide(); // Hide all Panels
        $(".accord_header").click(function (e) {
            $(".accord_panel").stop(true, false).slideUp(); // SlideUp and open panels
            $('.accord_header').find('img').attr("src", "http://www.upc.org/images/skin_images/RightArrow.png"); // Change image to RightArrow
            $(e.target).closest('.accord_header').next('.accord_panel').stop(true, false).slideToggle(); // SlideToggle panels
        });
        $(".accord_header").toggle( // Code to toggle arrow images
           function (t) {
               $(t.target).find('img').attr("src", "http://www.upc.org/images/skin_images/DownArrow.png"); // toggle to DownArrow
           }, function (t) {
               $(t.target).find('img').attr("src", "http://www.upc.org/images/skin_images/RightArrow.png"); //toggle to RightArrow
           });

    });

和css和html

 .accord_header
    {
        margin: 0;
        padding: 0;
        font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
        color: #615E5A;
        font-size: 9pt;
        font-weight: bold;
        background-color: black;
        cursor: pointer;
        width: 300px;
        height: 30px;
        border-top: white;
    }


    .accord_panel
    {
        margin: 0;
        padding: 0;
        font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
        color: #615E5A;
        font-size: 9pt;
        display: none;
        background-color: #f3f0ed;
        cursor: pointer;
    }

<body>
<h2 class="accord_header">
    <img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 1</strong>
</h2>
<div class="accord_panel">
    <strong><span>Panel 1 This is Panel 1
        <br />
        <br />
        <br />
    </span>
        <br />
    </strong>
</div>
<h2 style="text-align: -webkit-auto;" class="accord_header">
    <img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 2</strong>
</h2>
<div class="accord_panel">
    <strong><span>This is Panel 2<br />
        <br />
        <br />
    </span>
        <br />
    </strong>
</div>
<h2 style="text-align: -webkit-auto;" class="accord_header">
    <img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 4</strong>
</h2>
<div class="accord_panel">
    <strong><span>This is Panel 4<br />
        <br />
        <br />
    </span>
        <br />
    </strong>
</div>
<h2 style="text-align: -webkit-auto;" class="accord_header">
    <img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 5</strong>
</h2>
<div class="accord_panel">
    <strong><span>This is Panel 5<br />
        <br />
        <br />
    </span>
        <br />
    </strong>
</div>

我也把它放在jsfiddle这里http://jsfiddle.net/kevdog98/WM6x7/

感谢您的帮助。

凯文

Answer 1

尝试更改图片toggle以使用$(this)

$(".accord_header").toggle(
  function(t) {
    $(this).find('img').attr("src", "http://www.upc.org/images/skin_images/DownArrow.png");
  }, function(t) {
    $(this).find('img').attr("src", "http://www.upc.org/images/skin_images/RightArrow.png");
});

当您使用this时，您引用了.accord_header点击的内容。当您使用t.target时，它将是您点击的元素，它实际上可能是<span/>或其他元素，导致您的查询发现<img/>失败。

<强>更新

我认为问题的根源是在同一元素上使用click和toggle。通过改变图像，元素状态的内部跟踪变得不明朗。

我重复了一下你的功能，只需依靠一个看似产生你需要的功能的点击功能。

$(".accord_panel").hide(); // Hide all Panels
$(".accord_header").click(function() {
    var $header = $(".accord_header");
    $header.find("img").attr("src", "http://www.upc.org/images/skin_images/RightArrow.png");
    $header.next(".accord_panel").stop().slideUp();

    var $panel = $(this).next(".accord_panel");

    if ($panel.is(":hidden")) {
        $(this).find("img").attr("src", "http://www.upc.org/images/skin_images/DownArrow.png");
    }
    $panel.stop().slideToggle();
});

更新了fiddle，如果这不是你想要的，请告诉我。

JQuery切换停止工作

1 个答案: