1
我正在創建一個簡單的懸停「地圖」。基本上懸停在一個標記和一個彈出的細節揭示。無論如何，除了我想添加一個關閉按鈕，它大部分工作正常。現在用戶可以在彈出框外點擊並關閉它，但是我需要在角落添加一個關閉按鈕。但是，我的閉幕式不會開火。目前我只是試圖在用戶點擊內容彈出窗口中的任何位置並關閉時設置它。一旦我有這個工作，我將它應用到容器中的一個樣式的div。這裏是我的HTML的示例：jquery事件不會觸發
<div id="container">
<div id="truck"><img src="eVie.png" width="637" height="280" alt="Evie" /></div>
<div class="marker a">
<div class="content a inactive"><img src="solarpanel.jpg" width="240" height="205" alt="Solar Panels" />
<h2>Solar Panels</h2>
<p>Here Comes The Sun: These solar panels capture light and heat from the sun to power exhibits when I’m out visiting around town.</p>
</div>
</div>
<div class="marker b">
<div class="content b inactive"><img src="tailpipe.jpg" width="240" height="205" alt="Tailpipe Area" />
<h2>Tailpipe Area</h2>
<p>No tailpipe, no fumes. That’s how I roll.</p>
</div>
</div>
<div class="marker c">
<div class="content c inactive"><img src="plug.jpg" width="240" height="205" alt="Plug" />
<h2>Plug</h2>
<p>Not An Ordinary Plug: Big trucks need more energy. To get all the energy I need, I have to have a bigger plug and a special outlet!</p>
</div>
</div>
</div>
這裏是我的jQuery。除了content.active點擊功能之外，它都可以正常工作。爲什麼？我很難過這個！
$(document).ready(function(){
$(".marker").hover(
function(){
$(this).children(".content.inactive").addClass("show");
$(this).children(".content.inactive").animate({width: 155}, "fast");
}
,
function(){
$(this).children(".content.inactive").animate({width: 5, height: 23}, "fast");
$(this).children(".content.inactive").removeClass("show");
}
);
$(".content.inactive").click(
function(){
$(this).removeClass("inactive");
$(this).addClass("active");
$(this).animate({width: 435, height: 205}, "fast");
$(".inactive").addClass("disabled");
$(".disabled").removeClass("inactive");
$(".disabled").parent().addClass("dim");
$("#truck img").addClass("dim");
}
);
$(".content.active").click(
function(){
$(this).removeClass("active");
$(this).removeClass("show");
$(this).addClass("inactive");
$(this).animate({width: 5, height: 23}, "fast");
$(".disabled").addClass("inactive");
$(".disabled").parent().removeClass("dim");
$(".inactive").removeClass("disabled");
$("#truck img").removeClass("dim");
}
);
$(".content").click(function(){ return false; });
$(document).on("click", function() {
$(".content").animate({width: 5, height: 23}, "fast");
$(".disabled").addClass("inactive");
$(".inactive").removeClass("disabled");
$(".inactive").parent().removeClass("dim");
$("#truck img").removeClass("dim");
$(".active").addClass("inactive");
$(".show").removeClass("show");
$(".active").removeClass("active");
});
});
這裏的鏈接網站：http://stlenergy.org/evie/
任何幫助，將不勝感激。我確定我的邏輯不對，或者我錯過了一些顯而易見的事情。謝謝！
妮可，我當時不知道，但jQuery有.on（）方法，它可以更好地滿足您的需求。 – mowwwalker
謝謝，我會考慮將它切換出來。我爲最後一個函數使用了.on（）方法。我認爲這對jQuery（1.7）來說是比較新的。 –