Question

我能够使用来自多个不同站点的代码片段将脚本展开并折叠基于标题样式的部分。

我现在正试图弄清楚如何制作它，以便标题在折叠时在标题文本前面有一个右箭头，在展开时有一个向下箭头。

右箭头的HTML代码：➤➤

向下箭头的HTML代码：▼▼

我只是在HTML代码方面不知所措，所以非常感谢任何帮助/想法。

这是我到目前为止用于扩展和折叠的脚本。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
     $(document).ready(function(){
     $('h2').css('cursor','pointer');
     $("h2").nextUntil("h2").slideToggle();
     $("h2").click(function() {$(this).nextUntil("h2").slideToggle();});
     });
</script><div style="position:relative;">
<script>
     $(document).ready(function(){
     $('h4').css('cursor','pointer');
     $("h4").nextUntil("h4").slideToggle();
     $("h4").click(function() {$(this).nextUntil("h4").slideToggle();});
 });
</script><div style="position:relative;">

以下是HTML代码，其中标题和相关文本是根据上述脚本进行callaspes和扩展的地方

    <div class="MainBody">
    <div class="ContentArea">
        <div class="row">
            <div class="col col-3 StickyParent">
                <div id="mySticky" class="pageToc fixedsticky top ">
                    <div class="Toc_1">
                        Help</div>
                    <div class="Toc_2">
                        <a href="#ch1">Contact My SourceToPay Connect</a></div>
                    <div class="Toc_2"> 
                        <a href="#ch2">FAQ’s</a></div>
                </div>
            </div>
            <div class="col col-9 ">
                <h1 class="NoTopSpace">Help</h1>
                <img alt="Help image" class="roundA " src="CargillHelp1.jpg" />
                <h2 name="ch1" id="ch1" class="aLink"> ➤ Contact My SourceToPay Connect</h2>
                <p>Please use the request form at the below link to submit your question, comments, feedback, or request to My SourceToPay  Connect.
                </p>
                <p>
                <a class="button" href="https://cargillonline.sharepoint.com/sites/ProcureToPay/_layouts/15/listform.aspx?PageType=8&amp;ListId=%7B046A619E%2D7998%2D4406%2DB93A%2D4007FAC5726A%7D&amp;RootFolder=">
                My SourrceToPay Connect Contact Form </a></p>
                <h2 name="ch2" id="ch2" class="aLink">FAQ’s</h2>
                <p>COMING SOON</p>
            </div>
        </div>
        <div class="row spaceBottom ">
        </div>

    </div>
</div>

Answer 1

@Mike McCaughan在评论中提供了更好的答案/建议：

我强烈建议改变你的HTML结构来实现这个目标相当容易。用它自己的箭头包裹它自己的跨度 class会让你瞄准那个位[...]

而且，@Daniel D的解决方案更优雅，使用css类tdl.setOutputFilename(true);

但是，如果您仍然倾向于使用问题中概述的文本替换策略......

.rotate {}

$('#ch1').on('click', function() {
  var header_text = $(this).text();
  $(this).text(header_text.replace('➤', '▼'))
});

显然可以通过一些jquery动画函数来改进。您还需要包含一些“切换逻辑”

Answer 2

你可以做一些像.toggleClass这样简单的事情。你切换到的班级有旋转。然后它也将是相同的箭头，而不是两个不同。

我会将cursor: pointer附加到css，因为它是一致的。

这是jQuery的想法：

 $(document).ready(function(){
        $(".aLink").click(function() {
            $(this).toggleClass('rotate90deg');
            $(this).toggleClass('rotatedefault');
            $(".the-class-of-the-area-you-want-to-toggle").slideToggle(300);
        });
    });

aLink已经有了rotatedefault类。 class="aLink rotatedefault"

并且您可以使用旋转在css中创建rotate90deg类，如果您想要一些效果，甚至可以对其进行一些转换。

如何切换展开和折叠部分上显示的文本？

2 个答案: