2016-12-16 80 views
1

我喜欢3块,他们在PC版上完美的工作,他们关闭并点击打开,但我有一个移动版本的问题,当我点击其中一个打开,但它不关闭,它关闭只是如果我点击另一个块。如果我再次点击已打开的同一个块,它只是重新打开它。我无法关闭它,我不知道为什么。任何帮助,请!如何使第二次点击关闭?

<div class="section stats tint"> 
       <div class="container w-container"> 
        <div class="hero-overlay-row w-row"> 
          <div class="stats-column w-col w-col-4"> 
           <a class="hero-overlay-block-1 w-inline-block" href="#"> 
            <div class="hero-overlay-number">У</div> 
            <div class="hero-overlay-block-title">УЗО</div> 
            <p class="link-block-paragraph">Ги брани и прикажува ставовите на учениците.</p> 
           </a> 
          </div> 
         <div class="block-uzo"> 
          <h3>УЗО</h3> 
          <p> 
           Училишната Заедница на СУГС Орце Николов претставува легитимно тело составено од претседателите на сите класови, 
           со свое посебно претседателство и организација, основано со цел да ги брани и прикажува ставовите на учениците, 
           да воспоставува легитимна врска помеѓу учениците и училишните служби. Да организира настани, и покренува иницијативи 
           за подобрување на образованието. 
          </p> 
         </div> 
         <div class="stats-column w-col w-col-4"> 
         <a class="hero-overlay-block-2 w-inline-block" href="#"> 
         <div class="hero-overlay-number">М</div> 
         <div class="hero-overlay-block-title">Мисија</div> 
          <p class="link-block-paragraph">Комуникација и соработка со училишните служби.</p> 
         </a> 
         </div> 
         <div class="block-misija"> 
          <h3>Мисија</h3> 
          <p> 
           УЗО ги застапува потребите и интересите на учениците, преку комуникација и соработка со училишните служби и истовремено 
           поттикнува и придонесува личен развој, преку вклучување на учениците во училишни и вонучилишни активности. 
          </p> 
         </div> 
         <div class="last stats-column w-col w-col-4"> 
         <a class="hero-overlay-block-3 w-inline-block" href="#"> 
         <div class="hero-overlay-number">В</div> 
         <div class="hero-overlay-block-title">Визија</div> 
          <p class="link-block-paragraph">Подобрување на образованието.</p> 
          </a></div> 

         <div class="block-vizija"> 
          <h3>Визија</h3> 
          <p> 
           УЗО е самостојо рамноправно и легитимно тело составено од активни, мотивирани и амбициозни ученици, кое на демократски 
           начин е вклучено во носењето одлуки во соработка со училишните служби. 
          </p> 
         </div></div></div></div> 

$(document).ready(function() { 
    $(window).on("resize", function (e) { 
     checkScreenSize(); 
    }); 

    checkScreenSize(); 

    function checkScreenSize() { 
     var newWindowWidth = $(window).width(); 
     if (newWindowWidth < 768) { 
      $(document).ready(function() { 
       $('.hero-overlay-block-1').click(function() { 
        $('.block-uzo').slideToggle("slow"); 
        $('block-uzo').css('display', 'block');; 
        $('.block-more-1').hide(); 
        $('.block-misija').hide(); 
        $('.block-vizija').hide(); 
       }); 
      }); 
      $(document).ready(function() { 
       $('.hero-overlay-block-2').click(function() { 
        $('.block-misija').toggle("slow"); 
        $('.block-misija').css('display', 'block');; 
        $('.block-more-2').hide(); 
        $('.block-uzo').hide(); 
        $('.block-vizija').hide(); 
       }); 
      }); 
      $(document).ready(function() { 
       $('.hero-overlay-block-3').click(function() { 
        $('.block-vizija').toggle("slow"); 
        $('block-vizija').css('display', 'block');; 
        $('.block-more-3').hide(); 
        $('.block-uzo').hide(); 
        $('.block-misija').hide(); 
       }); 
      }); 
     } 
    } 
}); 
+0

我不会说俄语。 – iHasCodeForU

+0

@iHasCodeForU这不是俄罗斯,它是马其顿的网站,但没关系,我不是要求你阅读文本,你能解决我的问题,所以我可以关闭第二次点击div。为了解决这个问题,你不需要理解文本只是代码 –

+1

@VictorGavrilovic这个问题中的另一种语言使我们不确定是否有那种语言中的重要信息,我们错过了。你也似乎省略了一些代码。一个jsfiddle将是改善这个问题的一个有用的步骤。现在,我们不确定这个问题。 – Goose

回答

0

我不会说俄语,但我会尽我所能..

似乎正在注册了太多的点击处理程序,并得到了意想不到的行为。

$(window).on("resize", function (e) { checkScreenSize(); }你打电话你checkScreenSize功能每次你调整你的窗口,这个函数内你重新注册为每个英雄元素的单击处理程序,并再次,再如果你的分辨率比768低(这是为什么你只在手机上遇到问题)。

我认为你正在寻找的是这样的:

$(document).ready(function() { $('.hero-overlay-block-1').click(function() { if ($(window).width() < 768) { $('.block-uzo').slideToggle("slow"); $('block-uzo').css('display', 'block'); $('.block-more-1').hide(); $('.block-misija').hide(); $('.block-vizija').hide(); } }); $('.hero-overlay-block-2').click(function() { if ($(window).width() < 768) { $('.block-misija').toggle("slow"); $('.block-misija').css('display', 'block'); $('.block-more-2').hide(); $('.block-uzo').hide(); $('.block-vizija').hide(); } }); $('.hero-overlay-block-3').click(function() { if ($(window).width() < 768) { $('.block-vizija').toggle("slow"); $('block-vizija').css('display', 'block'); $('.block-more-3').hide(); $('.block-uzo').hide(); $('.block-misija').hide(); } }); });

这样,你对每个英雄元素注册一个单击处理一次。只有触发点击事件时才会检查屏幕分辨率。

对不起,如果我没有正确理解问题,我希望它有帮助。

+0

谢谢,但它不起作用,第二个div弹出,但我无法关闭它 –

+0

嗨!你可以创建一个JSFiddle你的问题? HTML部分很难理解。你是否删除了调整大小处理程序? –

+0

我不能因为该网站是大的,我有一些需要的JS,我可以创建HTML和CSS,我可以发布它,所以你可以添加JS –