Question

我有分裂显示和隐藏。现在我想要的是点击“显示”下面的一个分区显示详细信息和“显示”分区的文本更改为“隐藏”和点击“隐藏”细节隐藏，文字更改为“显示”。如何做到这一点。请帮助

这是我的HTML：

     <span id="show" class="" style="text-decoration: underline">
       <a href="#" class="fill-div" style="width: 100px;">
         Show details
        </a>
     </span>

      <span id="hide" class="" style="display:none">
           <a href="#" class="fill-div" style="width: 100px;">
                Hide details
           </a>
       </span>

       <div id="info" style="display:none; margin-left:2em">
       <i>
            Details shown here
       </i>
       </div>

编辑：

<tr class="">
            <td width="40%" valign="top">
                (<%=browser%>) 

             <span class="show"  style="text-decoration: underline">
                <a href="#"  class="fill-div" style="width: 100px; margin-left: 141px; margin-top: -20px;">Show details</a>
             </span>

            <div class="info" style="display:none; margin-left:2em">
             <i>
                 "<%=useragent%>"
             </i>
            </div>
            </td>
            <td valign="top">
                 India(<%=rs.getString("IP_ADD")%>)
            </td>
            <td valign="top">
                3:16 pm (0 minutes ago)
            </td>
        </tr>

我的JAVASCRIPT：

            <script>
           $(document).ready(function() {
    $(document).ready(function() {
    $('.show').click(function() {

        $(this).next().toggle();
        var visible = $(this).next().is(":visible");
if(visible){
  $('a',this).html('Hide details');
}else{
$('a',this).html('Show details');}

    });
});


        </script>

它不显示详细信息。请帮助

Answer 1

您无需跨越切换内容。使用两个跨度来实现这将使代码更复杂。试试这个：

<强> HTML

<span id="show" class="" style="text-decoration: underline">
   <a href="#" class="fill-div" style="width: 100px;">
     Show details
    </a>
 </span>
 <div id="info" style="display:none; margin-left:2em">
   <i>
        Details shown here
   </i>
 </div>

<强> JS：

$('#show').click(function() {
 $('#info').toggle();
 var visible = $('#info').is(":visible");
 if(visible)
   $('a',this).html('Hide details');
 else
   $('a',this).html('Show details');
});

<强> Working Demo

<强>更新

<强> Demo for multiple

Answer 2

使用它来显示/隐藏“详细信息”div：

http://api.jquery.com/toggle/

此外，您只需使用一个范围即可显示“显示/隐藏”链接，在您点击切换时相应地更改文字。

Answer 3

使用jQuery轻而易举。试试jsfiddle上的例子。

// Gets executed when document and markup is fully loaded
$(document).ready(function() {

    // Bind a click event on the element with id 'toggle'
    $('#toggle').click(function() {

        // Change text accordingly
        if ($('#text').html() == 'Show details') {
            $('#text').html('Hide details');  
        } else {
            $('#text').html('Show details');  
        }

        // Show / Hide info bar
        $('#info').toggle(); 
    });
});

Answer 4

$("#show a").click(function(e) {
    e.preventDefault();
    $("#info, #hide").show();
    $("#show").hide();
});
$("#hide a").click(function(e) {
    e.preventDefault();
    $("#info, #hide").hide();
    $("#show").show();
});

Answer 5

您可以这样做：

http://jsfiddle.net/Mp8p2/

您几乎不需要HTML：

<span class="toggle">Show Details</span>

<div id="info">
    Details shown here
</div>

以及css中的display:none和以下jQuery：

$(".toggle").click(function() {
    $('#info').slideToggle();
    if($(this).html() == "Show Details") {
        $(this).empty().text("Hide Details");
    }
    else { 
        $(this).html("Show Details");        
    }
});

显示和隐藏点击分部的详细信息

5 个答案: