Question

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide(500);
    document.getElementById('show').innerHTML = 'Plaats een Feed &#187;';
  });
  $("#show").click(function(){
    $("p").show(500);
    document.getElementById('show').innerHTML = 'Afbreken (x)';
    document.getElementById('show').id = 'hide';
  });
});
</script>

div不会隐藏上面的代码

我正在尝试制作一个脚本，通过单击按钮显示和隐藏div。按钮中的文本必须更改，这是有效的。如果单击按钮，它将隐藏div。但它没有发生。我不知道如何解决它。

Answer 1

<强> DEMO

正如您所提到的，按钮的ID将动态变化，以下代码将满足您的需求。检查演示并确认这是否是您要找的：

$(document).ready(function(){
  $(document).on('click', "#hide", function(){
    $("#divId").hide(500);  // considering you have div with id divID
    $(this).text( 'Plaats een Feed &#187;');
    this.id = 'show';
  });
  $(document).on('click',"#show", function(){
    $("#divId").show(500);  // considering you have div with id divID
    $(this).text('Afbreken (x)');
    this.id = 'hide';
  });
});

HTML 我假设基于以下问题：

<div id="divId">
   Some content in p tag
</div>


<button id="hide" value="hide">Hide</button>

Answer 2

如果您要显示/隐藏多个元素，则不能使用ID。您将获得通过事件单击“this”的元素的引用。

<script>
$(document).ready(function(){
  $(".hide").click(function(){
    $(this).hide(500);
    $(this).text('Plaats een Feed &#187;');
  });
  $(".show").click(function(){
    $(this).show(500);
    $(this).text('Afbreken (x)');
    $(this).removeClass('show');
    $(this).addClass('hide');
  });
});
</script>

Answer 3

如果需要，只需将style visibility hidden或none以及height和width设置为0。

div不会隐藏Javascript / HTML

3 个答案: