多個可摺疊div無法正常工作

大家好，我其實正在面臨一個問題我有多個加減div，點擊時應顯示內容。但是當我點擊一個加號圖標時，其他圖標會執行顯示和隱藏內容的操作。多個可摺疊div無法正常工作

<html> 
<body> 
<div class="expandContent1"><a><h1><img id="arrow1" src="plus.png">One</h1> </a> 

</div> 
<div class="showMe1" style="display:none">This content was hidden, but now shows up</div> 

<script> 
var div_show = $('.showMe1'), 
arrow = $('#arrow1'); 
$('.expandContent1').click(function() { 
div_show.slideToggle('slow', function() { 
    if ($(this).is(':visible')) { 
     arrow.prop('src', 'minus.png'); 
    } else { 
     arrow.prop('src', 'plus.png'); 
    } 
    }); 
}); 
</script> 
    </div> 
    <div class="expandContent2"><a><h1><img id="arrow2" src="plus.png">Two</h1></a> 

</div> 
<div class="showMe2" style="display:none">This content was hidden, but now shows up</div> 

<script> 
var div_show = $('.showMe2'), 
arrow = $('#arrow2'); 
$('.expandContent2').click(function() { 
div_show.slideToggle('slow', function() { 
    if ($(this).is(':visible')) { 
     arrow.prop('src', 'minus.png'); 
    } else { 
     arrow.prop('src', 'plus.png'); 
    } 
    }); 
    }); 
</script> 
    </body> 
    </html>

來源

2015-11-05 user1933852

你可以試試這個：

HTML：

<div class="expandContent"> 
    <a><h1><img src="plus.png">One</h1></a> 
</div> 
<div class="showMe" style="display:none"> 
    This content was hidden, but now shows up 
</div> 
<div class="expandContent"> 
    <a><h1><img src="plus.png">Two</h1></a> 
</div> 
<div class="showMe" style="display:none"> 
    This content was hidden, but now shows up 
</div>

JS：

$('img') 
    .on('click', function(ev) { 
     ev.preventDefault(); 
     var $this = $(this), $content = $this.closest('div').next('div.showMe'); 
     $('div.showMe') 
      .not($content[0]) 
      .slideUp('slow', function() { 
       $('img') 
        .not($this[0]) 
        .prop('src', 'minus.png'); 
     }); 
     $content 
      .slideToggle('slow', function() { 
       if($content.is(':visible')) { 
        $this 
         .prop('src', 'plus.png'); 
       } else { 
        $this 
         .prop('src', 'minus.png'); 
       } 
     }); 
    });

這裏是FIDDLE。

來源

2015-11-05 07:03:23 Beginner

謝謝你的:)不過我應該怎麼做，如果我不得不隱藏其他內容並且一次只顯示一個div，當我們點擊plus時。例如：如果我點擊+ One然後+ Two，則其中一個的內容仍然存在，它不會隱藏。 – user1933852

@ user1933852我已經更新了我的答案。 – Beginner

非常感謝你 – user1933852

實際上您不需要爲每個div塊創建點擊功能。這可以通過jQuery的好辦

UPADTED碼 - 處理圖像（加&負）也將崩潰其他div的不同之處在於點擊

$("div[class*='expandContent']").click(function() { 
    $("div[class*='expandContent']").not(this).next('div').hide(); 
    $('img',$("div[class*='expandContent']").not(this)).prop('src', 'http://www.scheiblecker.com/wp-content/themes/crius-child/images/icon_plus.png'); 
    $maindiv = $(this); 
    $(this).next('div').slideToggle('slow', function() { 
     if($(this).is(':visible')){ 
      $('img',$maindiv).prop('src', 'https://cdn2.iconfinder.com/data/icons/drf/PNG/minus%20white.png'); 
     } else { 
      $('img',$maindiv).prop('src', 'http://www.scheiblecker.com/wp-content/themes/crius-child/images/icon_plus.png'); 
     } 
    }); 
});

的選擇了一個適當的來回切換「DIV [類* = 'expandContent']」將適用於點擊功能上的所有DIV s that have a class starting with expandContent`

退房更新的演示在這裏 - http://jsfiddle.net/68uvf0c3/2/

來源

2015-11-05 07:15:48 nshah143

非常感謝你 – user1933852

@ user1933852 - 我更新了演示小提琴和答案。請檢查，如果您認爲這有幫助，請將其標爲答案，謝謝 – nshah143

你可以使用此代碼，而不是你的js代碼

$(document).ready(function(){ 
    $('div[class^="expandContent"]').on('click',function(){ 
     var $this = $(this); 
     alert($this.index()); $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).slideUp(); 
     $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).find('img[id^="arrow"]').attr('src','minus.png'); 
     $this.next('div[class^="showMe"]').slideToggle(1000, function(){ 
      var changeSrc = (($this.find('img[id^="arrow"]').attr('src')) == 'plus.png') ? 'minus.png' : 'plus.png'; 
      $this.find('img[id^="arrow"]').attr('src',changeSrc); 
     }); 

    }); 
});

DEMO

完整的代碼將

<div class="expandContent1"><a><h1><img id="arrow1" src="plus.png">One</h1></a></div> 

<div class="showMe1" style="display:none">This content was hidden, but now shows up</div> 

<div class="expandContent2"><a><h1><img id="arrow2" src="plus.png">Two</h1></a></div> 

<div class="showMe2" style="display:none">This content was hidden, but now shows up</div> 

<script> 
$(document).ready(function(){ 
    $('div[class^="expandContent"]').on('click',function(){ 
     var $this = $(this); 
     alert($this.index()); $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).slideUp(); 
     $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).find('img[id^="arrow"]').attr('src','minus.png'); 
     $this.next('div[class^="showMe"]').slideToggle(1000, function(){ 
      var changeSrc = (($this.find('img[id^="arrow"]').attr('src')) == 'plus.png') ? 'minus.png' : 'plus.png'; 
      $this.find('img[id^="arrow"]').attr('src',changeSrc); 
     }); 

    }); 
}); 
</script>

來源

2015-11-05 07:19:27

非常感謝 – user1933852

多個可摺疊div無法正常工作

回答

相關問題