需要切換CSS滑入功能，點擊不同的div？

我有這個JSfiddle，我需要滑入，當點擊一個div，而不是頁面加載時。同時應該可以通過點擊滑入框外的任何地方來關閉。需要切換CSS滑入功能，點擊不同的div？

$(document).ready(function() { 
    $(function(){ 
     $(".slide-in").addClass("active"); 
     console.log($(".slide-in")); 
    }); 
});

我認爲解決方案可能是某種切換系統，但我無法弄清楚如何？

謝謝！

來源

2016-01-24 Mikkel Lehrmann

你是複製。 –

@PraveenKumar你是什麼意思？ –

打開上.button的點擊滑塊。關閉它點擊滑塊（包括按鈕）以外的任何地方

var isOpened = false; 
$(document).click(function(e) { 
    if(isOpened && e.target.className=='slide-in') { 
    $(".slide-in").removeClass("active"); 
    isOpened = false; 
    } else if(!isOpened && e.target.className=='button'){ 
    $(".slide-in").addClass("active"); 
    isOpened = true; 
    } 
});

更好的是使用的ID。所以，你的代碼將是：

<div id="slide-in"></div> 
<div id="button"></div>

和JavaScript：

var isOpened = false; 
$(document).click(function(e) { 
    if(isOpened && e.target.id!='slide-in') { 
    $("#slide-in").removeClass("active"); 
    isOpened = false; 
    } else if(!isOpened && e.target.id=='button'){ 
    $("#slide-in").addClass("active"); 
    isOpened = true; 
    } 
});

你還需要到CSS從類改爲標識

來源

2016-01-24 23:03:46 PetrHejda

這太棒了，但是現在，當你點擊它自己時，＃slide-in關閉。當你點擊框外的任何地方時，我只希望它關閉。 –

編輯我的答案。現在只有在框外點擊纔會關閉。 – PetrHejda

太棒了。非常感謝你！ –

試試這個。

var someDiv = document.getElementById('yourDiv'); 

someDiv.style.cursor = 'pointer'; 
someDiv.onclick = function() { 
    //do something 
}

how to make div click-able?

來源

2016-01-24 22:47:17 Fennek

我想這應該做的伎倆。

編輯：

$(document).ready(function() { 
    $(".button").on("click",function(){ 
    if($(".slide-in").hasClass("active")){ 
     $(".slide-in").removeClass("active"); 
    }else{ 
     $(".slide-in").addClass("active"); 
    } 
    }); 
});

來源

2016-01-24 22:59:42 dvenkatsagar

僅當單擊.slide-in時纔會關閉，而不是「滑入框外的任何位置」 – PetrHejda

它有點類似的作品，但是當我需要關閉它時，我希望按鈕將其觸發。此刻你需要點擊幻燈片本身。我該如何改變這一點 - 謝謝！ –

@MikkelLehrmann好吧，我編輯了答案，根據你的需要，你可以使用這個以及... – dvenkatsagar

https://jsfiddle.net/zer00ne/jne1rasb/

$(document).ready(function() { 
    $('.button').on('click dblclick', function(e) { 

    $('.slide-in').toggleClass('active'); 
    e.stopPropagation(); 

    }); 
    $(document).on('click', function() { 
    $(".slide-in").removeClass("active"); 
    }); 
});

來源

2016-01-24 23:12:54 zer00ne

需要切換CSS滑入功能，點擊不同的div？

回答

相關問題