дисплей смены jQuery не работает

Question

Я хочу, чтобы div стал видимым, когда нажата кнопка. Вот HTML, который представляет собой кнопку:

<span id='dl' class='btn' data-app-id=''>DOWNLOAD<br/>FREE</span></div> 

Вот HTML из DIV в начальной стадии до нажатия кнопки.

<div class='box' id='dlbox' style='display:none'> 
    <div class='title'> 
     <span class='text'>Confirm install</span> 
     <span id='x1' class='x'></span> 
    </div> 
    <p>Click to install </p> 
    <p><?php echo "<span style='font-weight:bold'>$app->appName</span>"; ?></p> 
</div>​ 

JQuery это:

$("#dl").live("click", function() { 
    $("#dlblank").toggle(); 
    $("#dlbox").toggle(); 
});​ 

CSS-код в DIV, когда "переключены":

.box { 
    position: absolute; 
    background: #4d0404; 
    opacity: none; 
    z-index: 9001; 
    -webkit-box-shadow: 0 5px 7px black; 
    text-align: center; 
    color: white; 
    top: 50px; 
} 

Answer 1

Я лично предпочитаю использовать шоу и скрыть вместо переключения, как это бит лучше, что происходит. Я бы тоже сказал, что в jquery тоже нет никого.

$('#dlbox').css('display':'none'); 
$(document).ready(function() { 
     $("#dl").live("click", function(){ 
      $("#dlbox").show() 
     }); 
    }); 

Answer 2

Прежде всего вы пропустили открытие <div> тег здесь

<div><span id='dl' class='btn' data-app-id=''>DOWNLOAD<br/>FREE</span></div> 

В противном случае, ваш код работает хорошо, и только потому, что ваш код не может работать для вас может быть, что вы используете старая версия jQuery (например, 1.2.6) и функция live здесь не определены.

Я создал jsfiddle и вы можете увидеть его здесь http://jsfiddle.net/9wLjL/

Answer 3

У вас ошибка разметки. Закрытие </div> без открытия. В первой строке

Далее, вы можете отказаться от использования .bind(), это устарело. Вместо этого вы должны использовать .on().

$("#dl").on("click", function(){ 
    $("#dlblank").toggle(); 
$("#dlbox").toggle();}); 

Demo _{без div}

Answer 4

сделал $('#dl').click(function(){ /*....*/ } работы.