Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

Javascript menu - Проблем!

9 февруари 201214 г.

Здравейте. Опитвам се да направя едно javascript menu. Проблема е, че не мога да го направя така както искам. Остана само един проблем, който не мога да реша сам.

Имам едно accordion menu, тип подобен на този: цък. Искам, като се отваря страницата, да е отворен втория бутон с неговите под менюта. Гледайки примерното меню, което съм дал, искам да се показва всичко от Programmer language.

В момента моя код изглежда така:

function initMenu() {
  $('#menu ul').hide();
 
  $('#menu li a').click(
    function() {
    
	  var checkElement = $(this).next();
	  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
	    return false;
	    }
	  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
	    $('#menu ul:visible').slideUp('normal');
	    checkElement.slideDown('normal');
	    return false;
	    }
	  }
    );
  }
$(document).ready(function() {initMenu();})

Като #menu e ul, което държи цялото меню. Какво трябва да добавя, за да се вижда втрото меню всеки път, когато се отваря страницата?

Благодаря!

9 февруари 201214 г.

Сложи му id на необходимите елементи и го докопвай по съответното id Примера е даден тука - http://www.i-marco.nl/weblog/jquery-accordion-menu/

9 февруари 201214 г.

Автор

Е ще направя id на ul-то. И едниственото, което мога да покажа е първия бутон:

$('#menu ul:first').show();

За втория или третия, как ще стане?

9 февруари 201214 г.

това дето си го извадил на екрана не е id - това е идентификатор от CSS на менюто. Сложи атрибут id на съответният елемент дай стойност на това id и след това на мястото на CSS идентификатора сложи въпросната стойност...

9 февруари 201214 г.

Автор

Немога да те разбера. Това е част от html-a. Сложих id = test2 на Салата от ексотични гъби в бъркани тип "амфора. Oт тук нататък, незнам какво да правя. Javascript не разбирам, за това прибягнах към готовите решения.

<ul id="menu">
        <li>
          <a class="navmenu" href="test.html">Култивирана печурка</a>
      <ul>
                <li class="bg"><a href="#">Печурка "натюр"</a></li>
                <li class="bg"><a href="#">Маринована печурка</a></li>
                <li class="bg"><a href="#">Печурка в олио</a></li>
            </ul>
        </li>
    <li>
          <a class="navmenu" id="test2" href="test.html">Салата от ексотични гъби в бъркани тип "амфора</a>
            <ul>
		        <li class="bg" id="test"><a href="test.html">ВИЖ ВСИЧКИ</a></li>
                <li class="bg"><a href="#">Гъби "ШИТАКИ"</a></li>
                <li class="bg"><a href="#">Гъби "НАМЕКО"</a></li>
                <li class="bg"><a href="#">Гъби "КЛАДНИЦА"</a></li>
                <li class="bg"><a href="#">Гъби "СТРОФАРИЯ"</a></li>
			    <li class="bg"><a href="#">Гъби "ВОЛВАРИЯ"</a></li>
			    <li class="bg"><a href="#">ГЪБЕН МИКС "СОЛА"</a></li>
            </ul>
        </li>
</ul>

9 февруари 201214 г.

Премести id-то един елемент надолу т.е. от <a го местиш в <ul. И кода - $('#menu ul:first').show(); - трябва да стане - $('test').show(); Ако разбира се праилно усещам как работи JQuery-то

9 февруари 201214 г.

Автор

Не стана. Ето това направих:

<ul id="menu">
        <li>
          <a class="navmenu" href="test.html">Култивирана печурка</a>
      <ul>
                <li class="bg"><a href="#">Печурка "натюр"</a></li>
                <li class="bg"><a href="#">Маринована печурка</a></li>
                <li class="bg"><a href="#">Печурка в олио</a></li>
            </ul>
        </li>
    <li>
          <a class="navmenu" href="test.html">Салата от ексотични гъби в бъркани тип "амфора</a>
            <ul id="test2">
		        <li class="bg" id="test"><a href="test.html">ВИЖ ВСИЧКИ</a></li>
                <li class="bg"><a href="#">Гъби "ШИТАКИ"</a></li>
                <li class="bg"><a href="#">Гъби "НАМЕКО"</a></li>
                <li class="bg"><a href="#">Гъби "КЛАДНИЦА"</a></li>
                <li class="bg"><a href="#">Гъби "СТРОФАРИЯ"</a></li>
			    <li class="bg"><a href="#">Гъби "ВОЛВАРИЯ"</a></li>
			    <li class="bg"><a href="#">ГЪБЕН МИКС "СОЛА"</a></li>
            </ul>

а javascript-a, изглежда така:

function initMenu() {
    
  $('#menu ul').hide();
  $('test2').show();
 
  $('#menu li a').click(
    function() {
    
	  var checkElement = $(this).next();
	  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
	    return false;
	    }
	  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
	    $('#menu ul:visible').slideUp('normal');
	    checkElement.slideDown('normal');
	    return false;
	    }
	  }
    );
  }
$(document).ready(function() {initMenu();})

Всъщност, ето кода на цялото меню, за да не се пропусне нещо:

<ul id="menu">
        <li>
          <a class="navmenu" href="test.html">Култивирана печурка</a>
      <ul>
                <li class="bg"><a href="#">Печурка "натюр"</a></li>
                <li class="bg"><a href="#">Маринована печурка</a></li>
                <li class="bg"><a href="#">Печурка в олио</a></li>
            </ul>
        </li>
    <li>
          <a class="navmenu" href="test.html">Салата от ексотични гъби в бъркани тип "амфора</a>
            <ul id="test2">
		        <li class="bg" id="test"><a href="test.html">ВИЖ ВСИЧКИ</a></li>
                <li class="bg"><a href="#">Гъби "ШИТАКИ"</a></li>
                <li class="bg"><a href="#">Гъби "НАМЕКО"</a></li>
                <li class="bg"><a href="#">Гъби "КЛАДНИЦА"</a></li>
                <li class="bg"><a href="#">Гъби "СТРОФАРИЯ"</a></li>
			    <li class="bg"><a href="#">Гъби "ВОЛВАРИЯ"</a></li>
			    <li class="bg"><a href="#">ГЪБЕН МИКС "СОЛА"</a></li>
            </ul>
        </li>
        <li>
	        <a class="navmenu" href="http://www.i-marco.nl/weblog/">Салата от горски гъби в буркани тип "амфора</a>
			 <ul>
                <li class="bg"><a href="#">МАНАТАРКА</a></li>
                <li class="bg"><a href="#">ПАЧИ КРАК</a></li>
                <li class="bg"><a href="#">МАСЛОВКА</a></li>
                <li class="bg"><a href="#">САЖДИВКА</a></li>
			    <li class="bg"><a href="#">ГОРСКИ ГЪБЕН МИКС</a></li>
			    <li class="bg"><a href="#">РИЖИЙКА</a></li>
			  </ul>
	    </li>
        <li>
          <a class="navmenu" href="#">Стерилизирани зеленчукови консерви</a>
            <ul>
                <li class="bg"><a href="#">ДОМАТЕНО ПЮРЕ</a></li>
                <li class="bg"><a href="#">ПИПЕРКОВО ПЮРЕ</a></li>
                <li class="bg"><a href="#">ЦЕЛИ ДОМАТИ - НЕБЕЛЕНИ</a></li>
                <li class="bg"><a href="#">ГЮВЕЧ "OБИКНОВЕН"</a></li>
			    <li class="bg"><a href="#">ГЮВЕЧ "ДЕЛИКАТЕСЕН"</a></li>
			    <li class="bg"><a href="#">ПАПРИКАШ</a></li>
			    <li class="bg"><a href="#">ЛЕЧО</a></li>
                <li class="bg"><a href="#">ЛЕЧО ДЕЛИКАТЕСНО - С ГЪБИ</a></li>
                <li class="bg"><a href="#">ПЕЧЕНА КАПИЯ - БЕЛЕНА</a></li>
                <li class="bg"><a href="#">МАРИНОВАНА КАПИЯ</a></li>
			    <li class="bg"><a href="#">ЧОРБАДЖИЙСКИ ПИПЕР</a></li>
			    <li class="bg"><a href="#">БЯЛА ШИПКА</a></li>
			    <li class="bg"><a href="#">ФИФЕРОНИ</a></li>
                <li class="bg"><a href="#">МОРКОВИ СТЕРИЛИЗИРАНИ</a></li>
                <li class="bg"><a href="#">ЛЮТЕНИЦА "СОЛА"</a></li>
                <li class="bg"><a href="#">КЬОПООЛУ</a></li>
			    <li class="bg"><a href="#">КОРНИШОН</a></li>
			    <li class="bg"><a href="#">ПЕЧЕН ПАТЛАДЖАН - БЕЛЕН</a></li>
			    <li class="bg"><a href="#">ПАТЛАДЖАН В ДОМАТЕН СОС</a></li>
                <li class="bg"><a href="#">ИМАМБАЯЛДЪ</a></li>
                <li class="bg"><a href="#">ПИНДЖУР</a></li>
                <li class="bg"><a href="#">АЙВАР</a></li>
			    <li class="bg"><a href="#">ИКРА ОТ ПАТЛАДЖАНИ</a></li>
			    <li class="bg"><a href="#">ИКРА ОТ ТИКВИЧКИ</a></li>
			    <li class="bg"><a href="#">ЗЕЛЕН ФАСУЛ</a></li>
                <li class="bg"><a href="#">ЦАРСКА ТУРШИЯ</a></li>
                <li class="bg"><a href="#">КИСЕЛО ЗЕЛЕ - ЛИСТ</a></li>
                <li class="bg"><a href="#">КИСЕЛО ЗЕЛЕ -РЯЗАНО</a></li>
			    <li class="bg"><a href="#">ЧОРБАДЖИЙСКИ ПИПЕР</a></li>
			    <li class="bg"><a href="#">КОМПОТ ОТ ДЮЛИ</a></li>
			    <li class="bg"><a href="#">КОМПОТ ОТ СЛИВИ</a></li>
                <li class="bg"><a href="#">ЖЕЛЕ ОТ ДЮЛИ</a></li>
                <li class="bg"><a href="#">ГРАХ</a></li>
                <li class="bg"><a href="#">ПУКАНА КАПИЯ</a></li>
			    <li class="bg"><a href="#">ПУКАН ЧОРБАДЖИЙСКИ ПИПЕР</a></li>
			    <li class="bg"><a href="#">АРТИШОК</a></li>
			    <li class="bg"><a href="#">ЖАРДИНИЕРА </a></li>
            </ul>
        </li>
        <li>
          <a class="navmenu" href="#">Сушени екзотични / гъби в буркани от PET</a>
            <ul>
                <li class="bg"><a href="#">СУШЕНА МАНАТАРКА</a></li>
                <li class="bg"><a href="#">СУШЕН ПАЧИ КРАК</a></li>
                <li class="bg"><a href="#">СУШЕНА ПЕЧУРКА</a></li>
                <li class="bg"><a href="#">СУШЕНИ Гъби "ШИТАКИ"</a></li>
			    <li class="bg"><a href="#">СУШЕНИ Гъби "КЛАДНИЦА" </a></li>
			    <li class="bg"><a href="#">СУШЕНИ Черни Китайски Гъби </a></li>
			    <li class="bg"><a href="#">СУШЕН ГЪБЕН МИКС "СОЛА"</a></li>
            </ul>
        </li>
    </ul>
    </div>

10 февруари 201214 г.

Я да видим ся какво не стана? Докато го ръчкам - пробвай да замениш - $('test2').show(); - със - $('#test2').show(); или със - $('#menu ul#test2').show(); - Edit -> $('#menu ul#test2').show();

Редактирано 10 февруари 201214 г. от darkterminal (преглед на промените)

10 февруари 201214 г.

Автор

Не го ръчкай. стана с $('#test2').show(); Благодаря ти!

10 февруари 201214 г.

М дам - не съм се занимавал с HTML от три години и кусор и изпонаизмислиха какво ли не - ся и jQuery ще учим Аз си мисля обче, че ще е по-чисто ако го напишеш така -> $('#menu ul#test2').show();

10 февруари 201214 г.

Автор

Е, че каква е разликата между JQuery i Javascript. Защтото мисля да уча javascript, но ако няма смисал направо на JQuery да минвам

10 февруари 201214 г.

jQuery е феймуърк написан на JavaScript. С други думи второто е език за програмиране намиращ се във всеки браузър, а първото е скрипт, който трябва да си сложиш в страницата за да правиш по-лесно някои фокуси по страницата...

10 февруари 201214 г.

Автор

Още веднъж ти благодаря!

10 февруари 201214 г.

Архивирана тема

Темата е твърде стара и е архивирана. Не можете да добавяте нови отговори в нея, но винаги можете да публикувате нова тема, в която да продължи дискусията. Регистрирайте се или влезте във вашия профил за да публикувате нова тема.