jQuery toggle fade in/out

Я прочитал все предыдущие ответы на этом сайте с помощью переключателя Jquery, но я не вижу решения для своего. Цените чьи-то глаза на это. Все, что нам нужно здесь, это копирование, которое появляется по запросу при выборе #pulldown_tab. Несмотря на то, что я очень сильно смотрю на сайт W3 JQuery и боковое тестирование, я теряюсь в том, что не так.jQuery toggle fade in/out

<html> 
<head> 
<script> 
$(document).ready(function(){ 
$("section_content_wrapper""pulldown_tab").click(function(){ 
$("section_content_wrapper" "cream_of_the_craft").slideToggle("slow"); 
    }); 
}); 
</script> 


<div id="main"><!-- Start Main Area --> 
<div class="navigation_container"><!-- navigation --> 
<ul class="menu"> 
     <li><a href="#">About</a></li>   
     <li><a href="#">Articles</a></li> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
</ul> 
</div><!-- END navigation --> 

<div class="pppd_logo"> 
</div><!-- END logo --> 

<div class="section_content_wrapper"><!-- Start Section 1 Cream_of_the_Craft --> 
<h1>This is the Headline</h1> 
    <div id="pulldown_tab"></div> 
    <div id="cream_of_the_craft"> <!--section content--> 
    This is the copy to revealed.</div><!--section content--> 
     </div><!-- END Section 1 Cream_of_the_Craft --> 
</div><!-- End Main Area --> 


.section_content_wrapper 
{ 
position:  absolute; 
width:   46%; 
height:   200px; 
margin-top:  15%; 
margin-right: auto; 
margin-left: 39%; 
z-index:  0; 
} 

h1 
{ 
position: relative; 
margin-bottom: .8em; 
font-family: 'EB Garamond', serif; 
font-weight: 400; 
font-size: 2em; 
padding-left: 0.1em; 
padding-right: 0.1em; 
padding-bottom: 0; 
color: black; 
text-align: center; 
border-bottom-style:solid; 
border-width: 1px; 
border-color: black; 
z-index: 0; 
} 

#cream_of_the_craft 
{ 
position:  absolute; 
margin-top:  -25px; 
padding-top: 4em; 
padding-left: 1em; 
padding-right: 1em; 
padding-bottom: 1em; 
font-family: 'Istok Web', sans-serif; 
font-size:  1em; 
color:   black; 
background-color: #FFFFFF; 
opacity: .5; 
z-index: 0; 
display: none; 
} 


#pulldown_tab 
{ 
position:  absolute; 
height:48px; 
width: 34px; 
background:  url('pulldown.png'); 
margin-top:  -25px; 
margin-right: auto; 
margin-left: 17em; 
z-index:  2; 
}

источник

2013-06-03 user2446543

Полностью несвязанный, но если вы идете с вашего пути, чтобы дать divs идентификатор «section_ *», почему бы вам просто не использовать HTML5

? –

Вы используете JQuery селекторы неправильный путь, вот как это должно быть.

$(document).ready(function(){ 
    $(".section_content_wrapper > #pulldown_tab").click(function(){ 
    $(".section_content_wrapper > #cream_of_the_craft").slideToggle("slow"); 
    }); 
});

Я предлагаю вам прочитать введение в JQuery: http://learn.jquery.com/

источник

2013-06-03 05:06:21 Antoine

Вы пропустили точку. '$ (" section_content_wrapper' – PSL

Правильно, спасибо! – Antoine

+1 для официальных документов jquery –

Ваши селекторы неправильно. Они должны быть:

$(document).ready(function(){ 
    $(".section_content_wrapper #pulldown_tab").click(function(){ 
     $(".section_content_wrapper #cream_of_the_craft").slideToggle("slow"); 
    }); 
}); 

// .something equals class="something" 
// #something equals id="something"

Другие кулеры селекторы также доступны here

источник

2013-06-03 05:07:55 JRomero

Почему w3schools, когда доступны официальные документы? – PSL

Это был первый, который появился на google и при просмотре предоставил очень приятную таблицу синтаксиса селектора TBH, основные документы jQuery на самом деле не очень дружелюбны. Сравните таблицу с исходным сообщением с этим документом: http://api.jquery.com/category/selectors/ – JRomero

JQuery селектор тегов не прав ...

$(document).ready(function() { 
$("div.section_content_wrapper , div#pulldown_tab").click(function() { 
    $("div.section_content_wrapper , div#cream_of_the_craft").slideToggle("slow"); 
});

});

для использования несколько селектора в jquery

источник

2013-06-03 05:09:27

Пары вещей.

#pulldown_tab не содержит контента, поэтому вам нечего нажимать.
Ваши селекторы сломаны. Поскольку pulldown_tab и cream_of_the_craft имеют id, вы можете ссылаться на них напрямую как $("#pulldown_tab") и $(#cream_of_the_craft) соответственно.

Смотрите следующий jsfiddle для рабочего примера того, что вы хотите: http://jsfiddle.net/aB5Dy/

источник

2013-06-03 05:15:53 Recurse

Я испытал это и его работу. Ниже приведен фрагмент кода:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script> 

    $(document).ready(function(){ 
     $(".section_content_wrapper,#pulldown_tab").click(function(){ 
     $(".section_content_wrapper,#cream_of_the_craft").fadeToggle("slow"); 
      }); 
    }); 
    </script>

Используйте запятую между селекторами и используйте fadetoggle().

источник

2013-06-03 05:26:37 Zohaib

jQuery toggle fade in/out

ответ

Смежные вопросы