как разрешить только один div для расширения на readmore нажмите

У меня есть страница со структурой блога, в которой я бы разместил несколько сообщений. Проблема, с которой я столкнулся, заключается в том, чтобы получить только одну прочитанную ссылку, которая будет расширена и свернуть других. Я попытался использовать различные методы jquery и несколько html-структур для достижения этого, но не смог получить желаемые результаты. любезно дайте мне знать, как я могу решить эту проблему. Спасибо. URL: http://jsfiddle.net/DSbFc/как разрешить только один div для расширения на readmore нажмите

<script src="script.js"></script> 
<script src="script.responsive.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 

     $('.ReadMore').bind('click', function(e) 
     { 
      e.preventDefault(); 

      $('.hide').slideToggle(function() 
      { 

       $(this).closest('.readmore').find(".hide").toggle(); 

      }); 
     }); 
    }); 

</script> 

<body> 
    <div id="art-main"> 

     <article class="post"> 
      <table> 
       <tr> 
        <td><a href="images/image.png" data-lightbox="width:260;height:280" title="image"><img src="images/image.png" width="260px" height="280px"/></a></td><td> 
        <br/> 
        <table> 
         <tr> 
          <td>No.</td><td>Description</td><td>Qty.</td> 
         </tr> 
         <tr> 
          <td>1</td><td> content</td><td> 1</td> 
         </tr> 
         <tr> 
          <td>2</td><td> content</td><td> 1</td> 
         </tr> 
         <tr> 
          <td>3</td><td> content</td><td> 1</td> 
         </tr> 
         <tr> 
          <td>4</td><td> content</td><td> 2</td> 
         </tr> 
         <tr> 

        </table> 
        <div class="ReadMore"> 
         <a href="#" >Read More</a> 
        </div> 
        <div class="hide"> 
         <table > 

          <tr > 
           <td>6</td><td> content</td><td> 1</td> 
          </tr> 
          <tr > 
           <td>7</td><td> content</td><td> 1</td> 
          </tr> 
          <tr > 
           <td>8</td><td> content</td><td> 1</td> 
          </tr> 
          <tr > 
           <td>9</td><td> content </td> 
          </tr> 

         </table> 
        </div> 
        <div class="hide"> 
         text 
        </div></td> 
       </tr> 
    </div> 
    </table> 
    <br/> 
    <br/> 

    <table> 
     <tr> 
      <td><a href="images/image2.gif" data-lightbox="width:400;height:400" title="image2"><img src="images/image2.gif" width="260px" height="280px"/></a></td><td><b style="font-size:22px; color:#fff;">title</b> 
      <br/> 
      <b style="font-size:22px; color:#fff;">title</b> 
      <br/> 
      content 
      <br/> 
      <div class="ReadMore"> 
       <a href="#" >Read More</a> 
      </div> 
      <div class="hide"> 
       content 
       <br/> 

       <br/> 
       • content 
       <br/> 
       • content 
       <br/> 
       • content 
       <br/> 
       <br/> 

       </article> 
      </div> </div> 
      </div> 
      </div> 
      </div> 
</body>

источник

2013-08-11 Mubarak

Можете ли вы выравнивал код, или предоставить рабочий URL? –

Не могли бы вы объяснить, что вы пытаетесь здесь сделать? Вы снова и снова переключаетесь? И у вас нет элемента с классом 'readmore', он должен быть' ReadMore'. – putvande

Я сожалею, что поставил это на js fiddle сразу. я пытаюсь создать сообщения, которые будут иметь дополнительную ссылку и щелкнуть по определенному сообщению, будет расширен, показывая его скрытый контент. это было бы более понятно, как только я разместил ссылку. – Mubarak

Кроме того, это работает:

$(document).ready(function() { 
    var rm = $(".ReadMore"); 
    var hi = $('.hide'); 
    rm.click(function (e) { 
     e.preventDefault(); 
     var now = $(this).siblings(".hide"); 
     now.slideToggle(); 
     hi.not(now).filter(':visible').slideToggle(); 
    }); 
});

http://jsfiddle.net/DSbFc/5/

источник

2013-08-11 22:39:50 Stano

О, это похоже на идеальное решение :) Большое спасибо за это. – Mubarak

рад, что это помогло;) – Stano

Если я правильно понял вашу проблему, я думаю, вы могли бы быть в состоянии решить ее с помощью идентификаторов цифровых элементов, как показан в следующем примере:

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var totalNumberOfBoxes = 2; 
     function expand (id) { 
      for (var i = 0; i < totalNumberOfBoxes; i++) { 
       if (i == id) { 
        $('#hide' + i).show(); 
       } else { 
        $('#hide' + i).hide(); 
       } 
      } 
     } 
    </script> 
</head> 
<body> 
    <div style="padding:30px;"> 
     <div>Always-visible content 0</div> 
     <a href="#" onclick="expand(0);">Read More</a> 
     <div id=hide0 style="display:none;">Hidden content 0</div> 
    </div> 
    <div style="padding:30px;"> 
     <div>Always-visible content 1</div> 
     <a href="#" onclick="expand(1);">Read More</a> 
     <div id=hide1 style="display:none;">Hidden content 1</div> 
    </div> 
</body> 
</html>

Надеется, что это помогает!

источник

2013-08-11 21:37:18 pinfolio

Большое спасибо за ваш вклад, но с этим решением, если есть 100 сообщений, я не должен поддерживать каждый код? Я думал больше о том, как это сделать, если это возможно? – Mubarak

Я проверил коды портфеля. они не работают на скрипке. – Ali

Да, это правда ... Вы можете сгенерировать идентификаторы и onclick = "expand (n);" код программно для каждого сообщения, используя цикл, если вы используете бэкэнд-систему, такую как PHP. – pinfolio

Я исправил ваши коды. here is LIVE DEMO .... Тем не менее, я рекомендую вам использовать контейнеры div с значениями position: absolute;, так как триггер show/hide приведет к разрушению полосы прокрутки вашей страницы.

$(document).ready(function(){ 
    $(".ReadMore1").click(function(){ 
    $(".hide1").slideToggle(); 
    }); 
}); 

$(document).ready(function(){ 
    $(".ReadMore2").click(function(){ 
    $(".hide2").slideToggle(); 
    }); 
});

источник

2013-08-11 21:52:15 Ali

как разрешить только один div для расширения на readmore нажмите

ответ

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