多个滑动开关可更改文本

Multiple slidetoggle divs change text

本文关键字：可更改 文本 开关      更新时间：2023-09-26

我有这个代码，它显示了一个配置文件div onclick，也改变了被点击元素的文本。这样的例子有很多。

<div class="show" data-target=".open1">View Profile</div>
<div class="info open1">Lorem ipsum</div>

当另一个div被打开时，先前打开的div关闭。然而，这方面的文本仍然是"密切关注"。我想改变这一点，让文本也变回来。

你知道我该怎么做吗?

var $bgs = $('.info');
var $show = $('.show');
$($show).click(function () {
    var $target = $($(this).data('target')).stop(true).slideToggle();
    $bgs.not($target).filter(':visible').stop(true, true).slideUp();
    $(this).click(function(){
        $(this).text(function(_, oldText) {
            return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';
        });
    });
})

请检查:

var $bgs = $('.info');
var $show = $('.show');
$show.click(function () {
    var $target = $($(this).data('target')).stop(true).slideToggle();
    var oldOpened = $bgs.not($target).filter(':visible');
    oldOpened.stop(true, true).slideUp();
    if(oldOpened.length > 0){
      var tempClasses = $(oldOpened).attr("class");
      var oldOpenClass = $.trim(tempClasses.replace("info",""));
      var oldOpenerDiv = $("div[data-target='."+oldOpenClass+"']");
      
      $(oldOpenerDiv).text(function(_, oldText) {
        return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';
       });
    }
  
   $(this).text(function(_, oldText) {
      return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';
   });
})
.info{
  display:none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="show" data-target=".open1">View Profile</div>
<div class="info open1">Lorem ipsum 11</div>
<div class="show" data-target=".open2">View Profile</div>
<div class="info open2">Lorem ipsum 22</div>
<div class="show" data-target=".open3">View Profile</div>
<div class="info open3">Lorem ipsum 33</div>

var $bgs = $('.info');
var $show = $('.show');
$show.click(function() {
  var $target = $($(this).data('target')).stop(true).slideToggle();
  $bgs.not($target).filter(':visible').stop(true, true).slideUp();
  $(this).text(function(_, oldText) {
    return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="show" data-target=".open1">View Profile</div>
<div class="info open1">Lorem ipsum</div>

相关文章：