Question

我一直坚持如何更改我在使用点击时编写的以下代码的文本和样式。

var toggleButton = [
    '<div class="toggleButton">',
    '<a href="#">',
    '<i class="icon icon-comment"></i>',
    '<span class="fb_comments_count">2</span>',
    '<i class="icon icon-arrow-down"></i><div class="optshow">show comments</div>',
    '</a>',
    '</div>'
].join('');

$(function() {
    //declare variables
    var $comments = $("#comments_thread");
    //only activate the toggle if comments exists
    if ($comments.length) {
        //comments initially hidden
        $comments.hide();
        //append the toggle button
        $(toggleButton).find('a').html("show comments");
        $(toggleButton).insertBefore($comments);
        //action when the toggle button is clicked

    $(".toggleButton").click(function(e) {
            e.preventDefault();
            $comments.toggle("slow", function() {
                //change the toggle button's text
                var anchor = $(".toggleButton a");
                var anchorText = anchor.text() == 'show comments' ? 'hide comments' : 'show comments';
                $(anchor).text(anchorText);
            });
        });

    }
});

我想改变文字来自＆＃34;显示评论＆＃34; to＆＃34;崩溃，＆＃34;隐藏icon-comment和fb_comments_count，并用另一个图标替换icon-arrow-down。以下是CSS供参考。任何帮助都会提前得到很多赞赏！

.icon-arrow-down {
    float: right !important;
  padding-right: 15px;
}
.optshow {
    float: right;
  /*padding-right: 15px;*/
}
.toggleButton {
    margin-top: 30px;
  text-align: center;
}
.toggleButton > a {
  color: #8e8e8e !important;
  cursor: pointer;
  border: 2px solid #8e8e8e;
    box-sizing: border-box;
  display: block;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  /*padding: 8px 30px 8px 30px;*/
  line-height: 38px;
  height: 42px;
    text-transform: uppercase;
  transition: background-color .1s ease 0s,color .1s ease 0s;
}
.toggleButton > a:hover {
  background-color: #8e8e8e;
  color: #fff !important;
  text-decoration: none !important;
}
.toggleButton .icon {
    font-size: 18px;
  float: left;
  line-height: 38px;
  padding-left: 15px;
}
.toggleButton .fb_comments_count {
    float: left !important;
  padding-left: 15px;
}

Answer 1

看起来你的代码是你想要实现的1/3。您的主要问题是您使用锚文本覆盖整个切换按钮。

我为您创建了一个小小的片段，指出您正确的方向，从这里开始，您必须使用您需要的方式更改图标类。

var toggleButton = [
'<div class="toggleButton">',
'<a href="#">',
'<i class="icon icon-comment"></i>',
'<span class="fb_comments_count">2</span>',
'<i class="icon icon-arrow-down"></i><div class="optshow">show comments</div>',
'</a>',
'</div>'].join('');

$(function() {
//declare variables
var $comments = $("#comments_thread");
//only activate the toggle if comments exists
if ($comments.length) {
    //comments initially hidden
    $comments.hide();
    //append the toggle button
    $(toggleButton).find('a').html("show comments");
    $(toggleButton).insertBefore($comments);
    //action when the toggle button is clicked

$(".toggleButton").click(function(e) {
        e.preventDefault();
        var $toggleButton = $(e.currentTarget);

        $comments.toggle("slow", function() {
            //change the toggle button's text
            var $optShow = $toggleButton.find('.optshow'),
                $commentsCount = $toggleButton.find('.fb_comments_count'),
                anchorText = ($optShow.text() === 'show comments') ? 'hide comments' : 'show comments';

            $optShow.text(anchorText);
            $commentsCount.toggle();
        });
    });

}
});

＆＃13;

var toggleButton = [
    '<div class="toggleButton">',
    '<a href="#">',
    '<i class="icon icon-comment"></i>',
    '<span class="fb_comments_count">2</span>',
    '<i class="icon icon-arrow-down"></i><div class="optshow">show comments</div>',
    '</a>',
    '</div>'
].join('');

$(function() {
    //declare variables
    var $comments = $("#comments_thread");
    //only activate the toggle if comments exists
    if ($comments.length) {
        //comments initially hidden
        $comments.hide();
        //append the toggle button
        $(toggleButton).find('a').html("show comments");
        $(toggleButton).insertBefore($comments);
        //action when the toggle button is clicked

    $(".toggleButton").click(function(e) {
            e.preventDefault();
        	var $toggleButton = $(e.currentTarget);
        
            $comments.toggle("slow", function() {
                //change the toggle button's text
                var $optShow = $toggleButton.find('.optshow'),
                    $commentsCount = $toggleButton.find('.fb_comments_count'),
                	anchorText = ($optShow.text() === 'show comments') ? 'hide comments' : 'show comments';
                
                $optShow.text(anchorText);
                $commentsCount.toggle();
            });
        });

    }
});

＆＃13;

.icon-arrow-down {
    float: right !important;
  padding-right: 15px;
}
.optshow {
    float: right;
  /*padding-right: 15px;*/
}
.toggleButton {
    margin-top: 30px;
  text-align: center;
}
.toggleButton > a {
  color: #8e8e8e !important;
  cursor: pointer;
  border: 2px solid #8e8e8e;
    box-sizing: border-box;
  display: block;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  /*padding: 8px 30px 8px 30px;*/
  line-height: 38px;
  height: 42px;
    text-transform: uppercase;
  transition: background-color .1s ease 0s,color .1s ease 0s;
}
.toggleButton > a:hover {
  background-color: #8e8e8e;
  color: #fff !important;
  text-decoration: none !important;
}
.toggleButton .icon {
    font-size: 18px;
  float: left;
  line-height: 38px;
  padding-left: 15px;
}
.toggleButton .fb_comments_count {
    float: left !important;
  padding-left: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="comments_thread">
    <div class="comment">Comment one</div>
    <div class="comment">Comment two</div>
    <div class="comment">Comment three</div>
</div>

＆＃13;

切换时更改文本和样式

1 个答案: