Javascript 显示和隐藏函数

Question

我正在尝试对一些容器和文本执行显示/隐藏功能。 当我点击某个容器时，我想隐藏一段。目前我正在尝试解决当我单击 "left" 容器时，段落 "barbertext" 消失的问题。

<p class="hairtext" style="color:red">We are Thairapy, an independent hair <br> and beauty Salon located in the heart<br> of Exeter. At Thairapy, we care about<br> our clients and our main aim is to go<br> that extra mile and look after every <br> one of our happy customers.</p>

    <p class="beautytext" style="color:red">Our beautician, Shail Dutt has over<br> 10 years of experience within the beauty<br> industry. Shail is a very dedicated and<br> passionate person, she strives to make<br> her clients feel loved and special. </p>

    <p class="barbertext" style="color:red">A decent Mens haircut needn't cost the<br>Earth. We offer top quality Men's haircuts<br> from £7. </p>

    <div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>
</div>

我正在使用的 Javascript 是这样的:

<script>
$(document).ready(function(){
  $("#hairtext").click(function(){
    $("barbertext").hide();
  });
  $("#hairtext").click(function(){
    $("barbertext").show();
  });
});
</script>

如果有人能提供帮助，我将不胜感激。

Answer 1

您将两个处理程序绑定(bind)到同一个元素，因此每次单击时都会隐藏和显示。

尝试 toggle() 使其在隐藏/显示之间交替

$(document).ready(function(){
  $(".hairtext").click(function(){
    $(".barbertext").toggle();
  });
});

(需要添加 . 到 barbertext 选择器，. 用于头发文本。# 用于 ids)