Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jquery accordeon <table>

Автор: Marlik 28.8.2011, 08:09

Всем привет, есть простая гармонь, и есть файл текстовый в котором таблица. Текстовый файл инклудится на страницу. Пристраиваю гармонь в текстовый файл, и никакого эффекта, только анкоры появились по которым жать надо. При нажатии слегка дергается и все. Собсно вопросик:  Jquery не работает с файлами в которых существуют таблицы? Потому как та-же гармонь работает на отдельной странице, но там только текст, есть <div>, <p>, через них управление, и есть <br> и все. Спасибо за помощь.

Автор: ayax2005 29.8.2011, 15:05

Код в студию

Автор: Marlik 29.8.2011, 17:19

Да проблема мне кажется не в коде. Вчера воссоздал с помощью дивов, та-же самая песня. Но в jquery я вообще-то далек. Код <script> $(document).ready(function(){         $(".accordion h3:first").addClass("active");         $(".accordion p:not(:first)").hide();               $(".accordion h3").click(function(){               $(this).next("p").slideToggle("slow")             .siblings("p:visible").slideUp("slow");             $(this).toggleClass("active");             $(this).siblings("h3").removeClass("active");          });             });     </script> Код работает так: Код <div class="accordion">     <h3>Общие положения</h3>     <p> </p> </div> Все что между <p> и </p> это текст который скрывается. div настраивает общий вид на страничке. Вот при таблице или через div'ы между <p> </p> информация не скрывается, а должна быть гармоника . Не понимаю как победить. Спасибо.

Автор: ayax2005 29.8.2011, 19:12

Честно говоря, то что инклюдите тоже хочется увидеть

Автор: Amphiluke 29.8.2011, 19:17

Уж не пихаете ли вы таблицу в элемент <p>? Если так, то советую вам открыть Firebug и посмотреть состояние дерева DOM в runtime, так сказать. И вы увидите, что <p> выталкивает из себя элементы, не являющиеся инлайновыми. Замените <p> на какой-нибудь <div>, и все получится.

Автор: Marlik 29.8.2011, 20:23

Простите за безобразие, но вот код, который инклудтся:  Код <table width='100%'><tr><td align='left'>1.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=4 '>Серж Счастливый</a></td><td align='center'>224</td><td align='center'>руб.</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>2.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=25 '>Zirrus</a></td><td align='center'>212</td><td align='center'>руб.</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>3.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=3 '>Сергей Балаш</a></td><td align='center'>194</td><td align='center'>руб.</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>4.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=9 '>Оленька</a></td><td align='center'>171</td><td align='center'>10</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>5.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=5 '>Василий Уткин</a></td><td align='center'>168</td><td align='center'>10</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr> <tr><td align='left'>6.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=23 '>Андрей Колдин</a></td><td align='center'>160</td><td align='center'>10</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>7.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=1 '>Marlik</a></td><td align='center'>140</td><td align='center'>10</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>8.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=7 '>akaDimasik</a></td><td align='center'>138</td><td align='center'>10</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>9.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=28 '>Ayteko</a></td><td align='center'>102</td><td align='center'>8</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>10.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=39 '>Slonomoska</a></td><td align='center'>101</td><td align='center'>6</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>11.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=43 '>клим</a></td><td align='center'>85</td><td align='center'>5</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>12.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=40 '>тихон</a></td><td align='center'>68</td><td align='center'>6</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr><tr><td align='left'>13.</td><td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=46 '>Мигель</a></td><td align='center'>32</td><td align='center'>3</td></tr><tr><td height='5' align='left'></td><td align='center'></td><td align='center'></td></tr></table>

Автор: ayax2005 30.8.2011, 08:21

Я не поленился и собрал ваш код, и он работае (FF). Тут два вопроса: Как вы инклюдите? Вы точно подключаете jquery?

Автор: Marlik 30.8.2011, 10:01

Спасибо Вам. Может что и с инклудом. Покажите плз. как у Вас работает, код и все такое, спс. CMS Movable Type Вам наверное это ни о чем не скажет. Делаю через эту CMS инклуд файла(есть такая фишка). Я себе весь мозг вынес, да и люди ждут.  Спасибо.

Автор: ayax2005 30.8.2011, 10:07

<$mt:Include file="/var/www/ПУТЬКФАЙЛУ"$> Так что ли инклюдите? Проверьте наличие файла, правильность пути. У вас гдк-то совсем простая ошибка. Вот ваш код, который в чистом виде замечательно работает: Код <html><head>         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>     </head>     <body>         <script>             $(document).ready(function(){                 $(".accordion h3:first").addClass("active");                 $(".accordion p:not(:first)").hide();                 $(".accordion h3").click(function(){                     $(this).next("p").slideToggle("slow")                     .siblings("p:visible").slideUp("slow");                     $(this).toggleClass("active");                     $(this).siblings("h3").removeClass("active");                 });             });         </script>         <div class="accordion">             <h3>Общие положения</h3>             <p>             <table width='100%'>                 <tr>                     <td align='left'>1.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=4 '>Серж Счастливый</a>                     </td><td align='center'>224</td><td align='center'>руб.</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>2.</td>                     <td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=25 '>Zirrus</a></td>                     <td align='center'>212</td>                     <td align='center'>руб.</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>3.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=3 '>Сергей Балаш</a>                     </td>                     <td align='center'>194</td>                     <td align='center'>руб.</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>4.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=9 '>Оленька</a>                     </td>                     <td align='center'>171</td>                     <td align='center'>10</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>5.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=5 '>Василий Уткин</a>                     </td>                     <td align='center'>168</td>                     <td align='center'>10</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>6.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=23 '>Андрей Колдин</a>                     </td>                     <td align='center'>160</td>                     <td align='center'>10</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>7.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=1 '>Marlik</a>                     </td>                     <td align='center'>140</td>                     <td align='center'>10</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>8.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=7 '>akaDimasik</a>                     </td>                     <td align='center'>138</td>                     <td align='center'>10</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>9.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=28 '>Ayteko</a>                     </td>                     <td align='center'>102</td>                     <td align='center'>8</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>10.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=39 '>Slonomoska</a>                     </td>                     <td align='center'>101</td>                     <td align='center'>6</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>11.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=43 '>клим</a>                     </td>                     <td align='center'>85</td>                     <td align='center'>5</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>12.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=40 '>тихон</a>                     </td>                     <td align='center'>68</td>                     <td align='center'>6</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>                 <tr>                     <td align='left'>13.</td>                     <td align='left'>                         <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=46 '>Мигель</a>                     </td>                     <td align='center'>32</td>                     <td align='center'>3</td>                 </tr>                 <tr>                     <td height='5' align='left'></td>                     <td align='center'></td>                     <td align='center'></td>                 </tr>             </table>         </p>     </div> </body> </html>

Автор: Marlik 31.8.2011, 11:52

Да, файл инклудится таким образом. Но библиотеки были подключены в файле который отвечает за заголовок, так: Код <script type="text/javascript" src="http://www.kaper.pro/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.kaper.pro/jquery-ui-1.8.4.custom.min.js"></script> Ваш вариант работает на чистой странице, а вот если создать страницу или виджет в Movable Type, и воткнуть туда код, то не работает. Я сначала подумал что jguery не умеет работать с таблицами. Попробовал удалить библиотеки и подключить гугловскую как у вас в коде, не работает. Куда рыть не знаю. Вот сейчас еще поковыряюсь может что и получится.

Автор: ayax2005 31.8.2011, 11:54

Покажите исходный html сгенерированной страницы

Автор: Marlik 31.8.2011, 12:16

http://www.kaper.pro/pravila-dlja-posetitelej-i-uchastnikov.shtml, но в ней нет таблиц и она работает. http://www.kaper.pro/top.shtml, но уже с таблицами. И не работает. Правда ссылку на библиотеку в гугл убрал, потому что все равно ни так ни так не работало.

Автор: Amphiluke 31.8.2011, 21:56

Marlik, ну вы бы хотя б попробовали (хотя б интереса ради), что я вам сказал уж два дня назад как. Цитата(Amphiluke @  29.8.2011,  23:17 ) Замените <p> на какой-нибудь <div>, и все получится. Мало того, что заработает, так еще и код будет более валидным. Код             $(document).ready(function(){                 $(".accordion h3:first").addClass("active");                 $(".accordion div:not(:first)").hide();                 $(".accordion h3").click(function(){                     $(this).next("div").slideToggle("slow")                     .siblings("div:visible").slideUp("slow");                     $(this).toggleClass("active");                     $(this).siblings("h3").removeClass("active");                 });             }); Код             ...             <h3>Общие положения</h3>             <div>             <table width='100%'>                 <tr>              ... Впрочем, как хотите. Если вам надо, можно и костыли подставить под невалидный код, чтобы и он заработал.

Автор: Marlik 31.8.2011, 23:47

Дико извиняюсь, я так далеко просто не заглядываю, щас попробую. Спасибо. Все заработало спасибо.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)