单击spoliers块时更改标记

Change markers onclick in the spoliers block

本文关键字：spoliers 单击      更新时间：2023-09-26

我需要创建一个扰流板块。点击后应显示剧透主体，剧透标题应将其图标从"+"更改为"-"并变为粗体。当点击另一个扰流板时，前一个扰流板应该被隐藏，并将其图标从"-"改回"+"。在下面的代码中，"+"改为"-"，但对于所有剧透，不能再更改了。提前非常感谢您的帮助！

jQuery(document).ready(function($) { 
//SPOILERS  
var icon = $('.spoiler_links');
		  icon.find('span').text('+');
 $('.spoiler_links').click(function()
 	{
		  $(this).parent().children('div.spoiler_body').toggle('fast');
		  var icon = $('.spoiler_links');
		  icon.find('span').text('-'); 
		  return false;
 	});
});
.spoiler_body {
	display:none;
	}
 .spoiler_links {
	 cursor:pointer;
	 color:#5f6a70;
	 text-decoration:none;
	 display:block;
	 font-size:1em;
	 }
.spoiler_body {
	font-size:0.9em;
}
.spoilerblock {
	padding:1% 0;
	border-bottom:1px solid #dddede;
}
.icon {
	font-size:1.8em;
	font-weight:bold;
	color:#51758c;
	display:inline-block;
	float:right;
	position:relative;
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="spoilers">
    <div class="spoilerblock">
        <a href="" class="spoiler_links">Spoiler1 <span class="icon"></span></a>
            <div class="spoiler_body">
                   <p>
                   content
                   </p>
            </div>
     </div>
     <div class="spoilerblock">
        <a href="" class="spoiler_links">Spoiler2 <span class="icon"></span></a>
            <div class="spoiler_body">
                   <p>
                   content
                   </p>
            </div>
     </div>
     <div class="spoilerblock">
        <a href="" class="spoiler_links">Spoiler3 <span class="icon"></span></a>
            <div class="spoiler_body">
                   <p>
                   content
                   </p>
            </div>
     </div>       
     
</div>
</body>
</html>

试试这个：

jQuery(document).ready(function ($) {
//SPOILERS  
var icon = $('.spoiler_links');
icon.find('span').text('+');
$('.spoiler_links').click(function () {
    $(this).parent().children('div.spoiler_body').toggle('fast');
    var icon = $(this).find('span.icon');
    icon.text('-');
    return false;
});

})；

jQuery(document).ready(function($) { 
var icon = $('.spoiler_links');
          icon.find('span').text('+');
 $('.spoiler_links').click(function()
    {
		$('*').css('font-weight','normal'); 
        var $other_spoilers = $('a.spoiler_links').not(this);
            $other_spoilers.siblings().hide('fast');
           $other_spoilers.find('span').text('+'); 
		$(this).css('font-weight','bold');
        $(this).siblings().toggle('fast', function() {
            var $icon = $(this).siblings('a.spoiler_links').find('span')
            if ($icon.text() == '+') {
                $icon.text('-')
            } else {
                $icon.text('+')
            }
        })
        return false;
    });
   });
.spoiler_body {
	display:none;
	}
 .spoiler_links {
	 cursor:pointer;
	 color:#5f6a70;
	 text-decoration:none;
	 display:block;
	 font-size:1em;
	 }
.spoiler_body {
	font-size:0.9em;
}
.spoilerblock {
	padding:1% 0;
	border-bottom:1px solid #dddede;
}
.icon {
	font-size:1.8em;
	font-weight:bold;
	color:#51758c;
	display:inline-block;
	float:right;
	position:relative;
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="spoilers">
    <div class="spoilerblock">
        <a href="" class="spoiler_links">Spoiler1 <span class="icon"></span></a>
            <div class="spoiler_body">
                   <p>
                   content
                   </p>
            </div>
     </div>
     <div class="spoilerblock">
        <a href="" class="spoiler_links">Spoiler2 <span class="icon"></span></a>
            <div class="spoiler_body">
                   <p>
                   content
                   </p>
            </div>
     </div>
     <div class="spoilerblock">
        <a href="" class="spoiler_links">Spoiler3 <span class="icon"></span></a>
            <div class="spoiler_body">
                   <p>
                   content
                   </p>
            </div>
     </div>       
     
</div>

我在另一个地方找到了帮助。如果有人会有像我这样的问题，请使用上面的代码。感谢@user1947472的时间和帮助！

相关文章：