Ошибка в коде (разворачивающийся текст)

Zeferotsp · 02.10.2012

motek · 03.10.2012

Zeferotsp сказал(а):
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script > function one (objName) {
if ( $(objName).css('display') == 'none' ) {
$(objName).animate({height: 'show'}, 400);
} else {
$(objName).animate({height: 'hide'}, 200);
}
}
function two (objName) {
if ( $(objName).css('display') == 'none' ) {
$(objName).animate({height: 'show'}, 400);
} else {
$(objName).animate({height: 'hide'}, 200);
}
}
</script>
<body>
<div id="table" class="tab" >
<div class="row">
<span class="cell"><h1><img src="news/111.jpg" width="170" height="125" alt="" align="left" /> ЗАГОЛОВОК №1</h2>
<a href="#" onclick="one('#1'); return false"><img src="news/next.jpg" alt="" /></a>
<div id="1" style="display: none">
<p> РАЗВЕРНВШИЙСЯ ТЕКСТ №1 </p>
</div></span></div></div>

<div id="table" class="tab" >
<div class="row">
<span class="cell"><h1><img src="news/222.jpg" width="170" height="125" alt="" align="left" /> ЗАГОЛОВОК №2</h2>
<a href="#" onclick="one('#1'); return false"><img src="news/next.jpg" alt="" /></a>
<div id="1" style="display: none">
<p> РАЗВЕРНВШИЙСЯ ТЕКСТ №2 </p>
</div></span></div></div>
</body>

Так вот, ошибка в том, что при нажатии кнопки читать далее во втором блоке открывается текст первого блока и так независимо от колличества блоков.

индифекатор (id) - уникален, и употребляется один раз на странице...отсюда и беды

Zeferotsp · 03.10.2012

Если я его убираю вообще белиберда получается О_о
Так может код по лучше читаться будет:

Код:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script >
function one (objName)
  {if ( $(objName).css('display') == 'none' )
  {$(objName).animate({height: 'show'}, 400); }
  else {$(objName).animate({height: 'hide'}, 200);}}
function two (objName) {
  if ( $(objName).css('display') == 'none' )
  {$(objName).animate({height: 'show'}, 400);}
  else {$(objName).animate({height: 'hide'}, 200);}}
</script>
<body id="page1">
<div id="table" class="tab" >
  <div class="row">
   <span class="cell"><h1><img src="news/111.jpg" width="170" height="125" alt="" align="left" /> ЗАГОЛОВОК №1</h2>
   <a href="#" onclick="one('#1'); return false"><img src="news/next.jpg" alt="" /></a>
	 <div id="1" style="display: none">
	   <p> РАЗВЕРНВШИЙСЯ ТЕКСТ №1 </p>
	 </div>
   </span>
  </div>
</div>

<div id="table" class="tab" >
  <div class="row">
   <span class="cell"><h1><img src="news/222.jpg" width="170" height="125" alt="" align="left" /> ЗАГОЛОВОК №2</h2>
   <a href="#" onclick="one('#1'); return false"><img src="news/next.jpg" alt="" /></a>

    <div id="1" style="display: none">
	 <p> РАЗВЕРНВШИЙСЯ ТЕКСТ №2 </p>
    </div>
   </span>
  </div>
</div>
</body>

Indev29 · 03.10.2012

А зачем писать две абсолютно идентичные функции?

function one (objName)
{if ( $(objName).css('display') == 'none' )
{$(objName).animate({height: 'show'}, 400); }
else {$(objName).animate({height: 'hide'}, 200);}}
-------------------------------
function two (objName) {
if ( $(objName).css('display') == 'none' )
{$(objName).animate({height: 'show'}, 400);}
else {$(objName).animate({height: 'hide'}, 200);}}

Код:

 <span class="cell"><h1><img src="news/222.jpg" width="170" height="125" alt="" align="left" /> ЗАГОЛОВОК №2</h2>
<a href="#" onclick="one('#1'); return false"><img src="news/next.jpg" alt="" /></a>

<div id="1" style="display: none">
<p> РАЗВЕРНВШИЙСЯ ТЕКСТ №2 </p>
</div>

Замените на:

Код:

<span class="cell"><h1><img src="news/222.jpg" width="170" height="125" alt="" align="left" /> ЗАГОЛОВОК №2</h2>
<a href="#" onclick="one('#2'); return false"><img src="news/next.jpg" alt="" /></a>
<div id="2" style="display: none">
		 <p> РАЗВЕРНВШИЙСЯ ТЕКСТ №2 </p>
</div>

npofopr · 03.10.2012

Можете сделать вот так
Там блоки раскрываются с помощью

Код:

(function($) {
	 $.fn.openCloseBlocks = function(blocks, options) {
		 var defaults = {
			 speed: 'normal'
		 },
		 opts		 = $.extend(defaults, options),
		 togglers	 = $(this),
		 bls		 = $(blocks); if(!bls) return;
		
		 togglers.each(function(index) {
			 $(this).click(function(e) {
				 e.preventDefault();			
				 $(bls[index]).slideToggle(opts['speed']);
			 });
		 });
	 };
})(jQuery);
$('.anons_more').openCloseBlocks($('.item_work_detail'), {
	 speed: 'fast'
});

Можно наверно сделать и так, заменив hover на click

Код:

$('.work_item').hover(function() {
  $('.item_work_detail', this).slideDown(400);
  $(this).addClass("hov");
},
  function() {
    $('.item_work_detail', this).slideUp(100);
    $(this).removeClass("hov");
  }
);

Zeferotsp · 03.10.2012

Всем большое спасибо за помощь.
Исправил с помощью:

Код:

jquery-1.8.2.min.js

Код:

$(document).ready(function(){
    $('.news_content').hide();
    $('.news_read-more').on('click', function(){
	    $(this).next('.news_content').slideToggle(500);
    })
});

Код:

   .news{
    margin: 0 0 1em;
}
.news h2{
    font-size: 1em;
}
.news_read-more{
    text-decoration: underline;
    cursor: pointer;
}

Код:

<div class="news">
    <h2>Headline</h2>
    <p class="news_read-more">Read more</p>
    <p class="news_content">
	    Content
    </p>
</div>
<div class="news">
    <h2>Headline</h2>
    <p class="news_read-more">Read more</p>
    <p class="news_content">
	    Content
    </p>
</div>

Ошибка в коде (разворачивающийся текст)

Zeferotsp

New Member

motek

злой как @

Zeferotsp

New Member

Indev29

Just Code...

npofopr

Well-Known Member

Zeferotsp

New Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей