Question

昨天我发现了这个js切换功能。它工作得很好，但今天......它只是不起作用。我有我的新闻源，我希望每个新闻都在一个新的容器中......第一个是默认打开的，其他的是关闭的。它工作但今天当我打开一个div它再次关闭自己。如果我关闭第一个div，它默认打开它不会再打开...

JAVASCRIPT FILE

$(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>

Answer 1

将您的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()。那就行了。

Answer 2

将您的代码封装在单个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

Javascript切换功能我的版本

2 个答案: