Javascript切换功能我的版本

Javascript toggle function my version

本文关键字：我的 版本 功能 Javascript      更新时间：2023-09-26

我昨天发现了这个js切换函数。它运行得很好，但今天。。。它就是不起作用。我有我的新闻推送，我希望每条新闻都在一个新的容器中。。。。默认情况下，第一个打开，其他关闭。它起作用了，但今天当我打开一个div时，它又自动关闭了。如果我关闭默认打开的第一个div，它就不会再打开。。。

JAVASCRIPT文件

$(document).ready(function() {
$('#news').show();
$('a#sprozilec').click(function() {
    if (!$('#news').is(':visible')) {
        $('.prikaz').hide(400);
    }
    $('#news').slideToggle(400);
});
});
$(document).ready(function() {
   $('#news2').hide();
     $('a#sprozilec2').click(function() {
       if (!$('#news2').is(':visible')) {
           $('.prikaz').hide(400);
      }
      $('#news2').slideToggle(400);
   });
});

新闻文件

 <a href="#" id="sprozilec" class="button">New official video!</a>
            <div id="news" class="prikaz">
                    </div>
  <a href="#" id="sprozilec2" class="button">Bla Bla Bla!</a>
            <div id="news2" class="prikaz">
                    </div>

将JS重写为

$(document).ready(function()
{
    $('#news').show();
    $('a#sprozilec').click(function()
    {
        if (!$('#news').is(':visible'))
        {
            $('.prikaz').hide(400);
        }
        $('#news').slideToggle(400);
    });
    $('#news2').hide();
    $('a#sprozilec2').click(function()
    {
        if (!$('#news2').is(':visible'))
        {
            $('.prikaz').hide(400);
        }
        $('#news2').slideToggle(400);
    });
});

你只需要一个document.ready()。那就行了。

将代码封装在单个document.ready中，因为如果创建多个document.ready，则两者将同时执行。在您的情况下，代码的执行顺序很重要！

$(document).ready(function(){
    $('#news').show();
    $('a#sprozilec').click(function() {
        if (!$('#news').is(':visible')) {
            $('.prikaz').hide(400);
        }
        $('#news').slideToggle(400);
    });

    $('#news2').hide();
         $('a#sprozilec2').click(function() {
           if (!$('#news2').is(':visible')) {
               $('.prikaz').hide(400);
          }
          $('#news2').slideToggle(400);
    });
);

演示jsFiddle

相关文章：