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

~~~~~~~~~~~~~~~~~~~第二次编辑~~~~~~~~~~~~~~~~~~~~~~

好的，请看这个编辑过的答案：

~~~~~~~~~~~~~~~~~~~第二次编辑~~~~~~~~~~~~~~~~~~~~~~

好的，请尝试这个改变：

$(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>

jQuery切换div不能正常工作

3 个答案: