Question

我们假设我有一个 div ：

<div class="box-body">
   <a href="#" id="hideshow">Hide</a></br>
   <div id="message">
      <p>password: <input type="password" name="blog_pass"></p>
    </div>
</div>

基本上我想要做的是当我点击message链接时隐藏div hideshow，并在我再次点击此链接时再次显示它。

所以我在页面末尾添加了一个脚本来执行此操作：

$('#hideshow').toggle(function(){
    $('#hideshow').text('Show');
    $('#message').hide();
}, function(){
    $('#hideshow').text('Hide');
    $('#message').show();
});

但现在问题是它甚至没有成功。我的意思是控制台上没有出现错误，甚至链接Hide也没有以某种方式显示。

那你对此有什么看法......我该如何解决这个问题呢？

Answer 1

您可以使用类hidePwd来切换隐藏/显示操作：

＆＃13;

$('#hideshow').click(function(){
    var newText = $('#hideshow').text().trim() === 'Hide'? 'Show':'Hide';
    $('#hideshow').text(newText);
    $('#message').toggle('hidePwd');
});

＆＃13;

.hidePwd{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
   <a href="#" id="hideshow">Hide</a><br>
   <div id="message">
      <p>password: <input type="password" name="blog_pass"></p>
    </div>
</div>

＆＃13;

Jquery隐藏显示似乎不会工作Correclty

1 个答案: