Question

我在我的网站上写了这段代码。隐藏的功能很好，但是当我点击链接显示时，它只显示0.5秒然后隐藏它。请告诉我我的错误。

<script>
    $(document).ready(function(){

        $("div").click(function(){
            $("a:contains('Show content')" ).hide("none");
        });

        $("div:contains('Show map')").click(function(){
            $("a:contains('Show content')" ).show("none");
        });

    });
</script>

<a href="#"  class="btn btn-danger btn-sm btm-zindex " id="Show_cont"  >Show content</a>

<div class="col-md-12 profile profile_closed btn1" id="profile"></div>

Answer 1

这个$("div").click(是错误的，因为您没有div包含该内容，您的元素是a标记，但即使使用该标记也是未经修改的（它不太可能是仅 a代码

你在元素上有一个ID，所以你可能需要这样的东西：

  $('#Show_cont').click(function() {
    $("a:contains(Show content)").hide();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn btn-danger btn-sm btm-zindex " id="Show_cont">Show content</a>

Answer 2

当你点击div:contains('Show map')时，同时运行show和hide函数因为两个函数都会对点击div做出反应。

要修复它，请在class上标记`div＆＃39;。

<div class="hid">

     <a href="#">Show content</a>

</div>

并像这样更改jQuery：

$(".hid").click(function(){

            $("a:contains('Show content')" ).hide("none");
 })

最终代码：

＆＃13;

<html>
    <title>This is test</title>
    <head>
        <style>
            .hid a{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="hid">
            <a href="#"  class="btn btn-danger btn-sm btm-zindex " id="Show_cont"  >Show content</a>
        </div>
        <div class="col-md-12 profile profile_closed btn1" id="profile">Show map</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>

    $(document).ready(function(){

        $(".hid").click(function(){
            $("a:contains('Show content')" ).hide("none");
        });

        $("div:contains('Show map')").click(function(){
            $("a:contains('Show content')" ).show();
        });

    });             

        </script>
    </body>
</html>

＆＃13;

链接只显示0.5秒然后隐藏在juqery中

2 个答案: