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>