Question

我有以下html

   <div id="area">
     <p>Paragraph one</p>
     <p>Paragraph two</p>
     <p>Paragraph three</p>
     <p>Paragraph four</p>
     <p>Paragraph five</p>
     <p>Paragraph six</p>
   </div>

hide之后我需要<p>所有first one个标签，并且需要更多/更少阅读按钮。

我知道我可以通过这样做来计算元素：

var count = $("#area").find("p").length;
if(count > 1) {

}

但是我如何更多/更少地插入读取？

尝试实现显示/隐藏以切换显示块/无：

   <div id="area">
     <p>Paragraph one</p>
     <button type="button">Read more</button>
     <p style="display: none;">Paragraph two</p>
     <p style="display: none;">Paragraph three</p>
     <p style="display: none;">Paragraph four</p>
     <p style="display: none;">Paragraph five</p>
     <p style="display: none;">Paragraph six</p>
   </div>

Answer 1

使用jQuerys .slice()函数选择第一个之后的所有p-tag。并after添加阅读更多链接。

var $ps = $("#area").children("p");
$ps.slice(1).hide(); // hide all p-tags after the first one
// add the read more after the first element
$ps.eq(0).after($('<button type="button">Read more</button>').click(function(){
    // if the read more link is clicked, remove the read more link and show all p-tags
    $(this).remove();
    $ps.show();
}));

Answer 2

使用:first-child选择器获取区域的第一个孩子。
使用jQuery after方法添加按钮。
使用jQuery nextAll方法将hide标记在第一个p之后。
在按钮click event的hide内，按钮并显示所有p标记。

$("#area")
  .children("p:first-child")
  .after($("<button/>")
    .text("Read More")
    .click(function() {
      $(this).hide().siblings("p").show();
    }))
  .nextAll("p")
  .hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
  <p>Paragraph one</p>
  <p>Paragraph two</p>
  <p>Paragraph three</p>
  <p>Paragraph four</p>
  <p>Paragraph five</p>
  <p>Paragraph six</p>
</div>

Answer 3

你会得到这么多答案：

var items = $("p");
if(items.length > 1) {
    items.hide().first().show();
    var btn = $("<button type="button">Read more</button>")
          .on('click',function() {
               items.show();
          });
    items.first().after(btn);
}

这实际上取决于你是否想要主要使用JavaScript，主要是CSS或主要是现有的HTML。

CSS提示：

// hide all paragraphs that are in pairs, because <button> is after first
p + p { display: none; }

实际上，这就是我所能想到的。洛尔

Answer 4

以下是您可以测试的解决方案：

在css代码中：

#area p{display:none;}

在jquery代码中：

$("#area p:first-child).show();
$("button").click(function(){
$("#area p).show();
});

Answer 5

你可以使用这样的东西：

$("#area p").slice(1).addClass("hide");
$("#area p")[0].append("<a>Show More</a>");

我知道这可能看起来不太好，但我希望你能得到主旨。

Answer 6

你可以使用这个：https://jsbin.com/xuhuduqawi/edit?html,js,output 我在你的第一段中增加了一堂课。它简单易懂。添加Js：

$(document).ready(function(){
 $(".more").click(function(){
 $("p").show();
 });
$(".less").click(function(){
  $("p").hide();
  $(".first").show();
});
});

你的hyml已改为：

  <div id="area">
 <p class="first">Paragraph one</p>
 <p>Paragraph two</p>
 <p>Paragraph three</p>
 <p>Paragraph four</p>
 <p>Paragraph five</p>
 <p>Paragraph six</p>
 </div>
<button class="more">more </button>
<button class="less">less</button>

Answer 7

试试这个，一个替代解决方案

class VersePopupView: UIView {

    @IBOutlet weak var cell: VerseTableViewCell!
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var headerView: UIView!

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    class func instanceFromNib() -> VersePopupView {
        return UINib(nibName: "VersePopupView", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! VersePopupView
    }


    func assignVerseTableViewCell(cell: VerseTableViewCell)
    {
        // Assign it
        self.cell = cell

        // Get the verse details
        if let verseDetails = cell.verse_details {

            self.title.text = verseDetails.verseReference()

            // Adjust the frame

            // Adjust the text to be attributed text

            // Set the title to the verse reference

            // Anything else?

        }
    }
}

在小提琴here

上查看

n号后如何计算和隐藏元素？

7 个答案: