jQuery切換div不能正常工作

Question

我有div打開和關閉一些數據。問題是，當我點擊它打開的按鈕時，將文本更改爲摺疊，但當我第二次點擊它時，它將文本更改爲查找支持。 第二個問題是，如果我點擊不同的div，它會首先關閉它，如果其他div打開。 我希望它關閉所有並打開一個點擊並從摺疊更改爲查找支持。 這裏有什麼幫助嗎？

$(document).ready(function() { 
     $(".findButton").click(function() {   

      $(".findButton").val('Find Support');    
      $(this).val('Collapse'); 
      $("id^=ilsList").remove(); 
      $(this).closest($("#ilsList").appendTo($(this).parent()).slideToggle());   
     });   
    }); 

Demo

Answer 1

這樣的事情？ http://jsfiddle.net/sw0zn36e/7/

<div class="DivGroup"> 
    <label>Bay Village Branch - <b>Cuyahoga County Public Library</b></label> 
    <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton"/> 
    <div class="IlsTable" style="display:none;"> 
     <img src="../../Content/Images/ajax-loader.gif" style="display: none;" id="ajaxLoader"/> 
     TEXT   TEXT TEXT  
    </div> 
</div> 

$(document).ready(function() { 
    $(".findButton").on('click', function() { 
     if($(this).val() == 'Find Support') { 
      $(".findButton").val('Find Support');    
      $(this).val('Collapse'); 
      $('.DivGroup').find('.IlsTable').slideUp(); 
      $(this).closest('.DivGroup').find('.IlsTable').slideDown();       
     } 
     else { 
      $(".findButton").val('Find Support'); 
      $('.DivGroup').find('.IlsTable').slideUp(); 
     }      
    });  
}); 

編輯解決切換div的問題。我稍微改變了html的結構，所以我可以更有效地利用類。希望這可以幫助！

Answer 2

~~~~~~~~~~~~~~~~~~~第二編輯~~~~~~~~~~~~~~~~~~~~~~

OK，請看看這個編輯答案：

~~~~~~~~~~~~~~~~~~~第二編輯~~~~~~~~~~~~~~~ ~~~~~~~

好的，請嘗試這種變化：

$(document).ready(function() { 
$(".findButton").click(function() {  
    if ($(this).val() == 'Find Support') { 
     $('.findButton').each(function(){ 
      $(this).val('Find Support'); 
     }); 
     $(this).val('Collapse');    
     $(this).closest($("#ilsList").appendTo($(this).parent()).slideDown());    
    } else {  
     $(this).val('Find Support'); 
     $('.IlsTable').not(this).each(function(){ 
      $(this).slideUp(); 
     }); 
    }     
});  }); 

http://jsfiddle.net/sw0zn36e/4

Answer 3

你可以使用目前的一個比較按鈕前值：

$(".findButton").click(function() { 
 

 
    $(this).val(function() { 
 
    return $(this).val() === 'Collapse' ? 'Find support' : 'Collapse'; 
 
    }); 
 
    $("id^=ilsList").remove(); 
 
    $(this).closest($("#ilsList").appendTo($(this).parent()).slideToggle()); 
 
});

#ilsList { 
 
    display: none; 
 
} 
 
.IlsTable { 
 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    clear: both; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    padding: 20px 60px 20px 20px; 
 
    position: relative; 
 
} 
 
.trResult, 
 
.DivGroup { 
 
    border-top: 1px solid #ccc !important; 
 
    float: left; 
 
    padding: 3px 0 10px !important; 
 
    width: 100%; 
 
} 
 
.DivGroup { 
 
    padding-bottom: 3px; 
 
} 
 
.DivGroup label { 
 
    font-size: 17px; 
 
} 
 
button:hover, 
 
.findButton { 
 
    border: 1px solid #333; 
 
    color: #333; 
 
} 
 
button, 
 
.findButton { 
 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; 
 
    border: 1px solid #999 !important; 
 
    border-radius: 3px; 
 
    color: #666 !important; 
 
    cursor: pointer; 
 
    font-weight: normal !important; 
 
    margin-top: 5px; 
 
    padding: 5px !important; 
 
    text-transform: uppercase; 
 
} 
 
.findButton { 
 
    background: none repeat scroll 0 0 #1d6096; 
 
    border: medium none; 
 
    border-radius: 5px; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    float: right; 
 
    font-weight: bold; 
 
    padding: 8px 21px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="DivGroup"> 
 
    <label>Bay Village Branch - <b>Cuyahoga County Public Library</b> 
 

 
    </label> 
 
    <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton"> 
 
</div> 
 
<div class="DivGroup"> 
 
    <label>Bay Village Branch - <b>Cuyahoga County Public Library</b> 
 

 
    </label> 
 
    <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton"> 
 
</div> 
 
<div class="DivGroup"> 
 
    <label>Bay Village Branch - <b>Cuyahoga County Public Library</b> 
 

 
    </label> 
 
    <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton"> 
 
</div> 
 
<div class="IlsTable" id="ilsList"> 
 
    <img src="../../Content/Images/ajax-loader.gif" style="display: none;" id="ajaxLoader">TEXT TEXT TEXT</div>