जैसा कि आप मेरे स्निपेट में देख सकते हैं; ड्रॉपडाउन लंबवत नीचे की ओर दिखाते हैं। यहाँ मेरे प्रश्न हैं।

  1. मैं अपने उप-मेनू को लंबवत नीचे की ओर दिखाने के बजाय बाएँ या दाएँ कैसे दिखाऊँ?

  2. अभी तक यह मेनू तभी गायब होता है जब मैं फिर से कैरेट साइन पर क्लिक करता हूं। यह UX के नजरिए से थकाऊ हो सकता है। इसलिए मैंने टिप्पणी की गई तीन पंक्तियाँ जोड़ीं जो दस्तावेज़ में कहीं भी क्लिक करने पर इसे ड्रॉपडाउन गायब कर देंगी; लेकिन बाद के क्लिक पर ड्रॉपडाउन काम नहीं करेगा। मुझे पता है कि यह क्यों काम नहीं करेगा लेकिन मुझे कोई रास्ता नहीं मिल रहा है।

  3. इसके अलावा मल्टी लेवल ड्रॉपडाउन जटिलता की एक अतिरिक्त परत ला रहे हैं यानी अगर यह सिर्फ एक ड्रॉपडाउन था तो हम अपनी इच्छानुसार दिखा और छिपा सकते हैं। चूंकि कई ड्रॉपडाउन हैं, कोड बस बेतरतीब ढंग से छुपा/अनदेखा करता है।

कृपया आगे का रास्ता सुझाएं।

पीएस: कृपया बूटस्ट्रैप 3 के साथ समाधान प्रदान करें न कि 4।

$('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
  
  //document.addEventListener("click", function () {
    //    $('.dropdown-menu:visible').addClass('hide');
   // });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
	<ul class="nav navbar-nav">
		<li class="dropdown-submenu">
			<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
			<ul class="dropdown-menu multi-level">
				<li><a tabindex="-1" href="/#">Laughing</a></li>
				<li><a tabindex="-1" href="/#">Out</a></li>
				<li><a tabindex="-1" href="/#">Loud</a></li>
				<li class="divider"></li>
				<li class="dropdown-submenu">
				<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a tabindex="-1" href="/#">Just</a></li>
					<li><a tabindex="-1" href="/#/1">Another</a></li>
					<li><a tabindex="-1" href="/#/1">Sub</a></li>
					<li><a tabindex="-1" href="/#/1">Menu</a></li>
				</ul>
			</ul>
		</li>
	</ul>
	<ul class="nav navbar-nav">
		<li class="dropdown-submenu">
			<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
			<ul class="dropdown-menu multi-level">
				<li><a tabindex="-1" href="/#">Laughing</a></li>
				<li><a tabindex="-1" href="/#">Out</a></li>
				<li><a tabindex="-1" href="/#">Loud</a></li>
				<li class="divider"></li>
				<li class="dropdown-submenu">
				<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a tabindex="-1" href="/#">Just</a></li>
					<li><a tabindex="-1" href="/#/1">Another</a></li>
					<li><a tabindex="-1" href="/#/1">Sub</a></li>
					<li><a tabindex="-1" href="/#/1">Menu</a></li>
				</ul>
			</ul>
		</li>
	</ul>
</nav>
0
Rajkumar Somasundaram 7 अक्टूबर 2018, 14:53

1 उत्तर

सबसे बढ़िया उत्तर

मैंने आपके ड्रॉपडाउन मेनू पर कुछ सीएसएस गुणों को संशोधित किया है, पहले मैंने शीर्ष:0; सेट किया है ताकि ड्रॉपडाउन मूल तत्व के शीर्ष पर दिखाई दे। फिर मैंने बाएं सेट किया:25%; इससे ड्रॉपडाउन मेनू पेरेंट एलीमेंट के बाईं ओर कुछ रिक्त स्थान दिखाई देगा।

बाद के ड्रॉपडाउन के लिए, मैंने बाएं:100%; सेट किया है ताकि वे पैरेंट ड्रॉपडाउन के दाईं ओर दिखाई दें।

हर बार जब आप इसे बंद करना चाहते हैं तो 'छुपाएं' वर्ग जोड़ने के बजाय, इसके बजाय इसके सीएसएस को संशोधित करें;

$('.dropdown-menu:visible').css('display','none');

मैंने एक कोड भी जोड़ा जिसमें क्लिक किया गया तत्व बहुस्तरीय ड्रॉपडाउन के अंदर नहीं होने पर यह अन्य सभी सबमेनस छुपाएगा।

स्निपेट चलाएँ;

$('.dropdown-submenu a.test').on("click", function(e) {
  $(this).next('ul').toggle();

  // the parent dropdown-submenu which is a li tag
  var clickedDropdown = $(this).parent();

  // the parent of the li tag which is a ul tag
  var parentDropdown = $(this).parent().parent();

  if (!parentDropdown.hasClass("multi-level")) {

    // if the clicked element has a parent dropdown, hide all other submenus
    $(".dropdown-menu").each(function() {
      if ($(this).parent()[0] != clickedDropdown[0]) {
        $(this).css("display", "none");
      }
    });
  }

  e.stopPropagation();
  e.preventDefault();
});

document.addEventListener("click", function() {
  $('.dropdown-menu:visible').css('display', 'none');
});
.dropdown-menu {
  left: 25% !important;
  top: 0 !important;
}

.dropdown-menu .dropdown-menu {
  left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li class="dropdown-submenu">
      <a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
      <ul class="dropdown-menu multi-level">
        <li><a tabindex="-1" href="/#">Laughing</a></li>
        <li><a tabindex="-1" href="/#">Out</a></li>
        <li><a tabindex="-1" href="/#">Loud</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="/#">Just</a></li>
            <li><a tabindex="-1" href="/#/1">Another</a></li>
            <li><a tabindex="-1" href="/#/1">Sub</a></li>
            <li><a tabindex="-1" href="/#/1">Menu</a></li>
          </ul>
      </ul>
      </li>
  </ul>
  <ul class="nav navbar-nav">
    <li class="dropdown-submenu">
      <a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
      <ul class="dropdown-menu multi-level">
        <li><a tabindex="-1" href="/#">Laughing</a></li>
        <li><a tabindex="-1" href="/#">Out</a></li>
        <li><a tabindex="-1" href="/#">Loud</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="/#">Just</a></li>
            <li><a tabindex="-1" href="/#/1">Another</a></li>
            <li><a tabindex="-1" href="/#/1">Sub</a></li>
            <li><a tabindex="-1" href="/#/1">Menu</a></li>
          </ul>
      </ul>
      </li>
  </ul>
</nav>
1
Jerdine Sabio 7 अक्टूबर 2018, 15:45