unid_user

جی کوئری
مشکل در جی کوئری برای ساخت منوی آبشاری

2 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام و درود

دوستان گرامی ، یه منو برای حالت موبایل ساختم که بنظرم خودم کدهاش کاملا درسته اما نمیدونم چرا وقتی روی li دوم از ul دوم هم کلیک میکنم. فرقی نمیکنه و تمام منو بسته میشه.

لطفا ویدئو رو ببینید حتما متوجه منظورم میشید. حجم ویدئو 40 کیلوبایت هست.

کدهای جی کوئری:

$("span.mobile-nav-toggle").click(function() {
  $("nav#mobile-nav > ul").slideToggle(400);
});
$("ul.mobile-nav-ul > li:has(ul)").addClass('dropdown');
$("ul.mobile-ul-1 > li:has(ul)").addClass('dropdown');

$("ul.mobile-nav-ul > li.dropdown").click(function() {
  $(" > ul.mobile-ul-1", this).slideToggle(400);
});

$("ul.mobile-ul-1 > li.dropdown").click(function() {
  $(" > ul.mobile-ul-2", this).slideToggle(400);
});

 

nav menu.webm

با تشکر و سپاس

ویرایش شده در توسط unid_user
0

به اشتراک گذاری این پست


لینک به پست

دوستان لطفا راهنمایی کنید. ممنون

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط bigarash
      سلام دوستان
      توی سایت ما چند وقتی هست که منو به هم ریخته، وقتی روی منو میری به شکل زیر بازش می کنه. در واقع ساب منو باید زیر منوی اصلی باز بشه که اینطوری شده الان. ممنون میشم اگر راهنمایی کنید. آدرس سایت simorghsafar dot com هستش. 

    • توسط kamalwp
      سلام
      دوستان من دارم یک قالب وردپرس طراحی میکنم که به منوها قابلیت background image اضافه کردم که مثلا برای هر منو یه بکگراند متفاوت داشته باشه
      حالا میخوام داخل فهرست های وردپرس برای منوها امکانی اضافه کنم که کاربر خودش بتونه از اونجا مثلا با یک دکمه تصویر خودش رو برای هر منو انتخاب کنه ولی متاسفانه نمیدونم چجوری باید ایکارو انجام بدم
       
      دوستان ممنون میشم راهنمایی کنید چون واقعا برای ضروریه
      اگر منبعی هم هست که این رو آموزش بده بازم ممنون میشم معرفی کنید
    • توسط SadraHkm
      سلام دوستان
      امیدوارم حالتون خوب باشه
      لطفا یه نگاهی به کد زیر بندازید
      <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <button id="calcBtn">Calculate</button> <div id="result"></div> <script> $(window).ready(function () { $('#calcBtn').click(function (e) { $('p').each(function () { $(this).css('color','rgb('+ rand(0,255) +','+ rand(0,255) +','+ rand(0,255) +')'); $('#result').append($(this).html()); // ----------------- This Code : //$('#result').append($(this)); }) }); }) </script> در اون قسمتی از کد که دارم محتوی کدهای پاراگراف رو به تگ div اضافه میکنم یه سوالی ذهن منو مشغول کرده.
      اگر همین کدی که الان هست رو اجرا کنیم، جی کوئری هربار توی حلقه رنگ تگ اصلی رو تغییر میده و یه کپی از اون پاراگراف میگیره و اضافه میکنه به div.
      ولی اگه اون تکه کدی که کامنت هست رو با اون خط جایگزین کنیم، میاد و هر بار کلا تگ پاراگراف رو برمیداره و اضافش میکنه به div. یعنی دیگه کپی ازش نمیگیره و دیگه تگ های p اون بالا باقی نمیموند.
      میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!
      باتشکر فراوان
       
    • توسط unid_user
      سلام و درود
      دوستان گرامی، می خوام با کلیک کردن روی یه تگ a هر بار سه تا از تگ های div که کلاس items رو دارن نمایش داده بشه یا به اصطلاح laod بشه.
      شبیه این دکمه توی سایت ها زیاد دیدم و لی آموزش هایی که دربارش هست برای من زیاد مناسب نیست و نتونستم درست کنم.
      با تشکر و سپاس
    • توسط estedadrap
      سلام 
      من یه grid از مطالب ایجاد کردم میخواستم با css اون رو برای سایز های مختلف رسپانسیو کنم
      مثلا در سایز 
      360*640 دو ستونه بشه و عکس ها کنار هم قرار بگیره
      یا مثلا داخل سایز 
      768*1024 سه ستونه یا چهار ستونه بشه
      این کد php
      <?php
      ?>
      <div class="gridcontainer">
      <?php
      // Grid Parameters
      $counter = 0; // Start the counter
      $grids = 6; // Grids per row
      $titlelength = 20; // Length of the post titles shown below the thumbnails
      // The Query
      $args=array (
          'post_type' => 'lyrics',
          'posts_per_page' => 6
          );
      $the_query = new WP_Query($args);
      // The Loop
      while ( $the_query->have_posts() ) :
          $the_query->the_post();
      // Show all columns except the right hand side column
      if($counter != $grids) :
      ?>
      <div class="griditemleft">
      <div>
              <a class="call3"  href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
          </div><!-- .postimage -->
          <h2 class="call4">
              <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
              <?php if (mb_strlen($post->post_title) > $titlelength)
                  { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
              else { the_title(); } ?>
              </a>
          </h2>
      </div><!-- .griditemleft -->
      <?php
      // Show the right hand side column
      elseif($counter == $grids) :
      ?>
      <div class="griditemright">
          <div>
              <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
          </div><!-- .postimage -->
          <h2 class="call4">
              <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
              <?php if (mb_strlen($post->post_title) > $titlelength)
                  { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
              else { the_title(); } ?>
              </a>
          </h2>
      </div><!-- .griditemright -->
      <div class="clear"></div>
      <?php
      $counter = 0;
      endif;
      $counter++;
      endwhile;
      wp_reset_postdata();
      ?>
      </div><!-- .gridcontainer -->
      و اینم کد های css
       
      .gridcontainer .griditemleft{float: left;
      width: 150px;
      margin: 0 5px 15px 0;}
      .call4{
          font-size: 12px;
          background-color: rgba(161,160,161,1);
          padding-left: 10px;
          padding-bottom: 4px;
          padding-top: 2px;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      .call3{
          color:#123215;
          
      }