Question

当您点击＆＃34;隐藏信息＆＃34;时，我想更改＆＃34;隐藏信息＆＃34;到＆＃34;显示信息＆＃34;并更改图标：https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png。

再次点击文本时，它应该从＆＃34;显示信息＆＃34;到＆＃34;隐藏信息＆＃34;。

请记住，当您显示信息时，文本＆＃34;测试测试＆＃34;应显示。如果你想隐藏＆＃34;测试测试＆＃34;你点击＆＃34;隐藏信息＆＃34;。

我不知道该怎么做。

谢谢！

＆＃13;

$(document).ready(function(){
    $("div#test").click(function(){
        $("#test2").toggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test2" style="display:none">
teststests
</div>

<div id="test">
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information
</div>

＆＃13;

Answer 1

检查此 fiddle

代码

$(document).ready(function(){
    $("div#test,div#test2").click(function(){        
        $("div#test,div#test2").toggle();
    });
});

HTML

<div id="test">
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information
</div>

<div id="test2" style="display:none">
    <div>teststests</div>
<img src="https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png"/>
    hide information
</div>

Answer 2

<强> FIDDLE

<强> HTML：

<div id="show" style="opacity: 1;">Click this to show (insert wanted icon)</div>

<div id="hide" style="opacity: 0;">Click this to hide (insert another icon)</div>

<p id="text" style="opacity: 0;">testest</p>

<强> jQuery的：

$(document).ready(function(){
$('#show').click(function(){
$('#show').fadeOut(500, 0);
$('#text').fadeTo(500, 1);
$('#hide').fadeTo(500, 1);
});
$('#hide').click(function(){
$('#show').fadeTo(500, 1);
$('#text').fadeOut(500, 0);
$('#hide').fadeTo(500, 0);
});
});

<强> CSS：

#hide, #show{
position: absolute;
top: 0;
}

Answer 3

这假设您使用字体非常棒的图标和jquery为您的javascript

你的标记

<div>
    <a href="#" class="toggle show"><i class="fa fa-hide"></i> Show Information</a>
</div>

你的jquery

$(function () {
    $('.toggle').click(function() {
        if ( $(this).hasClass('show') ) {
            //replace the text
            $(this).text('Hide information');
            //replace the icon
            $(this).find('i').removeClass('fa-hide').addClass('fa-show');
            $(this).removeClass('show').addClass('hide);
        } else {
            //replace the text
            $(this).text('Show information');
            //replace the icon
            $(this).find('i').removeClass('fa-show').addClass('fa-hide');
            $(this).removeClass('hide').addClass('show);                
        }
    });
});

应该这样做欢呼声。

Answer 4

你想要的是什么：

js part：

$(document).ready(function(){
    $("div#test").click(function(){

     if ($('#test2').css('display') == 'none') {
      $("#test2").show();
        $("#changeme").html("Hide Information");
         $("#changeimg").attr("src","https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png");
}     
        else{
            $("#test2").hide();
        $("#changeme").html("Show Information");
            $("#changeimg").attr("src","https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png");

        }   
 });
});

您只需要在html中更改一点，例如添加ID：

<div id="test2" style="display:none">
teststests
</div>



<div id="test">
<img id="changeimg" src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> 
<span id="changeme">Show Information</span>
</div>

检查http://jsfiddle.net/2pys32qj/

使用jQuery更改文本和图标

4 个答案: