使用jQueryCSS隐藏活动和显示一个_Jquery_Html_Hidden

使用jQueryCSS隐藏活动和显示一个

jquery html

使用jQueryCSS隐藏活动和显示一个,jquery,html,hidden,Jquery,Html,Hidden,我正在尝试创建一个自动隐藏选项，允许用户单击链接以显示/显示项目，但我希望能够在用户选择其他主题时自动关闭活动显示 $（文档）.ready（函数（）{ $（“#myp-0”，）。单击（函数（）{ $（“#松散-0”）。切换（600）； }); }); $（文档）.ready（函数（）{ $（“#myp-1”，）。单击（函数（）{ $（“#loose-1”）。开关（600）； }); }); $（文档）.ready（函数（）{ $（“#myp-2”，）。单击（函数（）{ $（“#loose-2

我正在尝试创建一个自动隐藏选项，允许用户单击链接以显示/显示项目，但我希望能够在用户选择其他主题时自动关闭活动显示


$（文档）.ready（函数（）{
$（“#myp-0”，）。单击（函数（）{
$（“#松散-0”）。切换（600）；
});
});
$（文档）.ready（函数（）{
$（“#myp-1”，）。单击（函数（）{
$（“#loose-1”）。开关（600）；
});
});
$（文档）.ready（函数（）{
$（“#myp-2”，）。单击（函数（）{
$（“#loose-2”）。开关（600）；
});
});
单击
我将消失
单击
我将消失
单击
我将消失

首先请注意，每页只需要一个document.ready事件处理程序

为了简化代码，您可以使用Don't Repeat Yourself（干式）原则。为了实现这一点，在所有可点击的

元素和被切换的元素上放置公共类。然后可以使用DOM遍历，在本例中是

next（）

，以查找相关元素并切换它。然后可以选择与事件无关的所有其他元素，并将其隐藏。大概是这样的：

$（函数（）{
$（'.myp'）。单击（函数（）{
var$target=$（this）.next（'.loose'）.toggle（600）；
美元（“.lose”）。不是（$target）。slideUp（600）；
});
});
p{margin:0；}
.loose{display:none；}

单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
单击
如果单击我，我将消失。
首先请注意，每页只需要一个document.ready事件处理程序
为了简化代码，您可以使用Don't Repeat Yourself（干式）原则。为了实现这一点，在所有可点击的p
元素和被切换的元素上放置公共类。然后可以使用DOM遍历，在本例中是next（）
，以查找相关元素并切换它。然后可以选择与事件无关的所有其他元素，并将其隐藏。大概是这样的：

$（函数（）{
$（'.myp'）。单击（函数（）{
var$target=$（this）.next（'.loose'）.toggle（600）；
美元（“.lose”）。不是（$target）。slideUp（600）；
});
});
p{margin:0；}
.loose{display:none；}

单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
单击
如果您单击我，我将消失。
您可以使用hide（）函数，并在文档就绪时将所有功能合并到一个函数中：


$（文档）.ready（函数（）{
$（“#loose-0”）.hide（）；
$（“#loose-1”）.hide（）；
$（“#loose-2”）.hide（）；
$（“#myp-0”，）。单击（函数（）{
$（“#松散-0”）。切换（600）；
});
$（“#myp-1”，）。单击（函数（）{
$（“#loose-1”）。开关（600）；
});
$（“#myp-2”，）。单击（函数（）{
$（“#loose-2”）。开关（600）；
});
});
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
您可以使用hide（）函数，并在文档就绪时将所有功能合并到一个函数中：


$（文档）.ready（函数（）{
$（“#loose-0”）.hide（）；
$（“#loose-1”）.hide（）；
$（“#loose-2”）.hide（）；
$（“#myp-0”，）。单击（函数（）{
$（“#松散-0”）。切换（600）；
});
$（“#myp-1”，）。单击（函数（）{
$（“#loose-1”）。开关（600）；
});
$（“#myp-2”，）。单击（函数（）{
$（“#loose-2”）。开关（600）；
});
});
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
使用带隐藏方法的通配符，然后单击“切换”


$（文档）.ready（函数（）{
$（'p[id*='myp']）。单击（函数（）{
$（'p[id*=“loose”]'）。hide（）；
$（this.next（'p'）.toggle（600）；
});
});
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
使用带隐藏方法的通配符，然后单击“切换”


$（文档）.ready（函数（）{
$（'p[id*='myp']）。单击（函数（）{
$（'p[id*=“loose”]'）。hide（）；
$（this.next（'p'）.toggle（600）；
});
});
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
它应该可以工作，但可能需要一些更改尝试此操作
  .hidden{
    display :none;
   }

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){ 
        $("#myp-0,#myp-1,#myp-2").click(function(){
        $('.newCLass').addClass('hidden')
         $(this).next('p').toggleClass('hidden')
        });
    }); 
    });
    </script>
    </head>
    <body>
    <p id="myp-0">click</p>
    <p id="loose-0" class="newCLass">If you click on me, I will disappear.</p>
    <p id="myp-1">click</p>
    <p id="loose-1" class="newCLass">If you click on me, I will disappear.</p>
    <p id="myp-2">click</p>
    <p id="loose-2" class="newCLass">If you click on me, I will disappear.</p>

</body>
</html>

。隐藏{
显示：无；
}
$（文档）.ready（函数（）{
$（“#myp-0，#myp-1，#myp-2”）。单击（函数（）{
$（'.newCLass'）.addClass（'隐藏'）
$（this）.next（'p'）.toggleClass（'hidden'））
});
}); 
});
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
单击
如果你点击我，我就会消失
它应该可以工作，但可能需要一些更改尝试此操作
  .hidden{
    display :none;
   }

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){ 
        $("#myp-0,#myp-1,#myp-2").click(function(){
        $('.newCLass').addClass('hidden')
         $(this).next('p').toggleClass('hidden')
        });
    }); 
    });
    </script>
    </head>
    <body>
    <p id="myp-0">click</p>
    <p id="loose-0" class="newCLass">If you click on me, I will disappear.</p>
    <p id="myp-1">click</p>
    <p id="loose-1" class="newCLass">If you click on me, I will disappear.</p>
    <p id="myp-2">click</p>
    <p id="loose-2" class="newCLass">If you click on me, I will disappear.</p>

</body>
</html>

。隐藏{
显示：无；
}