unid_user

جی کوئری
یه باگ جی کوئری در منوی سایت

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

سلام و درود

دوستان گرامی یه مشکل در منوی سایت پیش اومده وقتی میرم روی منوی محصولات زیر منو چندین بار خود به خود باز و بسته میشه. کدها و ویدئو رو هم میزارم لطفا کمک کنید.

<nav>
      <ul>
        <li>
          <a href="#">صفحه اصلی</a>
        </li>
        <li class="dropdown">
          <a href="#">محصولات</a>
          <ul>
            <li>
              <a href="#">محصول یک</a>
            </li>
            <li>
              <a href="#">محصول دو</a>
            </li>
            <li>
              <a href="#">محصول سه</a>
            </li>
            <li>
              <a href="#">محصول چهار</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">نمونه کارها</a>
        </li>
        <li>
          <a href="#">درباره ما</a>
        </li>
        <li>
          <a href="#">تماس با ما</a>
        </li>
      </ul>
    </nav>
nav {
  background-color: #616161;
  text-align: center;
  border-bottom: 2px solid #333333;
}
nav > ul > li {
  display: inline-block;
  list-style: none;
  color: #fff;
  font-size: 12px;
}
nav > ul > li > a {
  color: #fff;
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  transition: all .5s;
}
nav > ul > li > a:hover, li.dropdown > ul > li > a:hover {
  background-color: #555555;
  color: #deb887;
}
nav > ul > li > ul > li {
  list-style: none;
  text-align: right;
}
nav > ul > li > ul > li > a {
  color: #fff;
}
li.dropdown {
  position: relative;
}
li.dropdown > ul {
  position: absolute;
  width: 150px;
  background-color: #616161;
  right: 0px;
  top: 106%;
  border-bottom: 2px solid #333333;
  display: none;
}
li.dropdown > ul > li > a {
  margin: 10px auto;
  display: block;
  padding: 10px 20px;
}
$("li.dropdown").hover(function() {
  $(" > ul", this).slideDown('slow');
}, function() {
  $(" > ul", this).slideUp('slow');
});

با تشکر و سپاس

Video-Sun-Dec-16-2018-22-56-36.webm

0

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


لینک به پست
در ۱ ساعت قبل، unid_user گفته است :

سلام و درود

دوستان گرامی یه مشکل در منوی سایت پیش اومده وقتی میرم روی منوی محصولات زیر منو چندین بار خود به خود باز و بسته میشه. کدها و ویدئو رو هم میزارم لطفا کمک کنید.


<nav>
      <ul>
        <li>
          <a href="#">صفحه اصلی</a>
        </li>
        <li class="dropdown">
          <a href="#">محصولات</a>
          <ul>
            <li>
              <a href="#">محصول یک</a>
            </li>
            <li>
              <a href="#">محصول دو</a>
            </li>
            <li>
              <a href="#">محصول سه</a>
            </li>
            <li>
              <a href="#">محصول چهار</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">نمونه کارها</a>
        </li>
        <li>
          <a href="#">درباره ما</a>
        </li>
        <li>
          <a href="#">تماس با ما</a>
        </li>
      </ul>
    </nav>

nav {
  background-color: #616161;
  text-align: center;
  border-bottom: 2px solid #333333;
}
nav > ul > li {
  display: inline-block;
  list-style: none;
  color: #fff;
  font-size: 12px;
}
nav > ul > li > a {
  color: #fff;
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  transition: all .5s;
}
nav > ul > li > a:hover, li.dropdown > ul > li > a:hover {
  background-color: #555555;
  color: #deb887;
}
nav > ul > li > ul > li {
  list-style: none;
  text-align: right;
}
nav > ul > li > ul > li > a {
  color: #fff;
}
li.dropdown {
  position: relative;
}
li.dropdown > ul {
  position: absolute;
  width: 150px;
  background-color: #616161;
  right: 0px;
  top: 106%;
  border-bottom: 2px solid #333333;
  display: none;
}
li.dropdown > ul > li > a {
  margin: 10px auto;
  display: block;
  padding: 10px 20px;
}

$("li.dropdown").hover(function() {
  $(" > ul", this).slideDown('slow');
}, function() {
  $(" > ul", this).slideUp('slow');
});

با تشکر و سپاس

Video-Sun-Dec-16-2018-22-56-36.webm

وقت بخیر دوست من

برای این مورد نیاز نیستش از جاوا اسکریپت استفاده کنید

میتونین از خاصیت visibility استفاده کنید که اگه آشنایی کامل باهاش ندارید، بفرمایید تا دقیق تر توضیح بدم

اگرم اسرار بر استفاده از جاوا اسکریپت دارید کدتونو بررسی کنم 

سوالی داشتید حتما بپرسید بنده پاسخگو هستم

موفق باشید

0

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


لینک به پست
در 6 دقیقه قبل، miladalizade گفته است :

وقت بخیر دوست من

برای این مورد نیاز نیستش از جاوا اسکریپت استفاده کنید

میتونین از خاصیت visibility استفاده کنید که اگه آشنایی کامل باهاش ندارید، بفرمایید تا دقیق تر توضیح بدم

اگرم اسرار بر استفاده از جاوا اسکریپت دارید کدتونو بررسی کنم 

سوالی داشتید حتما بپرسید بنده پاسخگو هستم

موفق باشید

با این خاصیت آشنا نیستم لطفا توضیح بدید. ولی مشکل رو حل کردم با اضافه کردن تابع stop(). و اگر برای جی کوئری راه حل بهتری دارید هم بفرمایید.

ممنون

0

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


لینک به پست
در 2 دقیقه قبل، unid_user گفته است :

با این خاصیت آشنا نیستم لطفا توضیح بدید. ولی مشکل رو حل کردم با اضافه کردن تابع stop(). و اگر برای جی کوئری راه حل بهتری دارید هم بفرمایید.

ممنون

درود

خوشحالم ک مشکلتون حل شد

راه حل دیگش اینه که ابتدا به زیر منو ها کد زیر رو اضافه کنید

    visibility: hidden;
    opacity: 0;

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

visibility: visible;
opacity: 1;

در این صورت حتی اگه بهش انیمیشن هم تعریف کنید اعمال خواهد شد وگرنه اگه از خاصیت display:none استفاده کنید هیچ انیمیشنی نمیتونین توش اعمال کنین

سوالی داشتید حتما بپرسید بنده پاسخگو هستم

موفق باشید

1

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


لینک به پست

کد جی کوئریتونو به صورت زیر تغییر بدین احتمالا درست میشه

$("li.dropdown").hover(function() {
  $(" > ul", this).stop().slideDown('slow');
}, function() {
  $(" > ul", this).stop().slideUp('slow');
});

 

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط 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 بشه.
      شبیه این دکمه توی سایت ها زیاد دیدم و لی آموزش هایی که دربارش هست برای من زیاد مناسب نیست و نتونستم درست کنم.
      با تشکر و سپاس
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، می خوام یه منوی آکاردئونی ساده با جی کوئری ایجاد کنم که وقتی روی هر کدوم از آیتم های منو کلیک میکنی، زیر منوی سایر آیتم ها بسته بشه.
      <nav> <ul id="first-ul"> <li> <a>صفحه اصلی</a> </li> <li> <a>خدمات</a> <ul class="second-ul"> <li> <a>آموزش رباتیک</a> </li> <li> <a>طراحی و ساخت ربات</a> </li> </ul> </li> <li> <a>محصولات</a> <ul class="second-ul"> <li> <a>ربات مسیریاب</a> </li> <li> <a>ربات حل ماز</a> </li> </ul> </li> </ul> </nav> با تشکر و سپاس
    • توسط jistili1
      سلام دوستان.من یک select box دارم و قرار بر اینه که به ازای هر مقدار select box یک div خاص نمایش داده بشه و بقیه div های مربوط به مقادیر دیگر select box مخفی بشن.
      این کد جی کوئری من هست:
      $("#select").change(function(){ if($(this).val()=="empty"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="localref"){ $("#date").css("display","hidden"); $("#localref").css("display","block"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="date"){ $("#date").css("display","block"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="price"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","block"); } if($(this).val()=="number"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","block"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="product"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","block"); $("#price").css("display","hidden"); } if($(this).val()=="refid"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","block"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } }); حالا مشکل من اینجاست که فرض کنید من از توی select box ، مقدار date رو انتخاب کردم.خب تا اینجا درست کار میکنه و div مربوط به date برای من نمایش داده میشه.حالا اگه روی مقدار empty کلیک کنم ، طبق کد باید تمامی div ها مخفی بشن ولی این اتفاق نمیفته.حالا من از select box مقدار date رو انتخاب کردم و div مربوط به date برام نمایش داده میشه اگه بعدش روی گزینه localref کلیک کنم ، div مربوط به localref نمایش داده میشه ولی div مربوط به date مخفی نمیشه.ممنون میشم کمکم کنید که بفهمم مشکل از کجاست.