Question

我的代码有问题，我需要显示2个或更多带有更多阅读内容和更少阅读内容的文本，但它只在第一个单词上显示。在按下按钮两次后，第二个按钮才起作用。

HTML代码

            <h1 align="center">What is CSS?</h1>
            Cascading Style Sheets (CSS) is a style sheet language used for describing 
            the presentation of a document written in a markup language.
            <div>
            <br>
            <span id="text">CSS is designed primarily to enable the separation of 
            document content from document presentation, including aspects such as the 
            layout, colors, and fonts..<br>
            </div>
            <div class="btn-container">
            <button id="toggle">Read More</button>
            </div>

            <h1 align="center">What is CSS?</h1>
            Cascading Style Sheets (CSS) is a style sheet language used for describing 
            the presentation of a document written in a markup language.
             <div>
             <br>
             <span id="text2">CSS is designed primarily to enable the separation of 
             document content from document presentation, including aspects such as the 
            layout, colors, and fonts..<br>
            </div>
            <div class="btn-container">
            <button id="toggle2">Read More</button>
            </div>

JS代码

                    $(document).ready(function() {
                  $("#toggle").click(function() {
                    var elem = $("#toggle").text();
                    if (elem == "Read More") {
                      //Stuff to do when btn is in the read more state
                      $("#toggle").text("Read Less");
                      $("#text").slideDown();
                    } else {
                      //Stuff to do when btn is in the read less state
                      $("#toggle").text("Read More");
                      $("#text").slideUp();
                    }
                  });
                });

                $(document).ready(function() {
                  $("#toggle2").click(function() {
                    var elem = $("#toggle2").text();
                    if (elem == "Read More") {
                      //Stuff to do when btn is in the read more state
                      $("#toggle2").text("Read Less");
                      $("#text2").slideDown();
                    } else {
                      //Stuff to do when btn is in the read less state
                      $("#toggle2").text("Read More");
                      $("#text2").slideUp();
                    }
                  });
                });

CSS代码

               #text{
               display:none;
               }

jsfiddle代码：https://jsfiddle.net/nt_razvan/knogcm1d/

Answer 1

您需要添加ID

            <ListView x:Name="listViewJson">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="60"></RowDefinition>
                                        <RowDefinition Height="60"></RowDefinition>
                                        <RowDefinition Height="10"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="1*"></ColumnDefinition>
                                        <ColumnDefinition Width="2*"></ColumnDefinition>
                                        <ColumnDefinition Width="3*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>

                                    <Label Grid.Column="0" Text="{ Binding nCode }" XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/>
                                    <Label Grid.Column="1" Text="{ Binding nName }" XAlign="Center" YAlign="Center" TextColor="Black"/>
                                    <Label Grid.Column="2" Text="{ Binding Balance }" XAlign="Center" YAlign="Center" TextColor="Black"/>

                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

考虑到开始时您看到的是文本编号2。

重获

Answer 2

第二个文本最初是可见的。您需要调整CSS。追加：

#text2{
    display:none;
}

或：

#text, #text2{
    display:none;
}

阅读更多/更少的2种不同文字

2 个答案: