सवाल कोणीय-बूई बूटस्ट्रैप के साथ उत्तरदायी ड्रॉपडाउन नेविबार (सही कोणीय तरीके से किया गया)


मैंने कोणीय-यूई-बूस्टरप मॉड्यूल "ui.bootstrap.dropdownToggle" का उपयोग करके एक ड्रॉपडाउन नेविबार के साथ एक जेएसफ़ाइल बनाया है: http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

जहां तक ​​मैं समझता हूं कि यह ड्रॉपडाउन मेनू को लागू करने के लिए उचित, कोणीय प्रकार का तरीका है। Angularjs के संदर्भ में "गलत" तरीका, bootstrap.js को शामिल करना होगा और "डेटा-टॉगल =" ड्रॉपडाउन "का उपयोग करना होगा ... क्या मैं यहां हूँ?

अब मैं निम्नलिखित नौसेना में किए गए मेरे नेविबार में उत्तरदायी व्यवहार जोड़ना चाहता हूं: http://jsfiddle.net/ghtC9/6/

लेकिन, उपरोक्त समाधान के बारे में मुझे कुछ पसंद नहीं है। लड़के bootstrap.js शामिल थे!

तो मेरे मौजूदा navbar में उत्तरदायी व्यवहार जोड़ने के लिए सही कोणीय तरह का तरीका क्या होगा?

मुझे स्पष्ट रूप से बूटस्ट्रैप्स उत्तरदायी नेविबार वर्गों जैसे "एनवी-पतन पतन नेविबर-उत्तरदायी-पतन" का उपयोग करने की आवश्यकता है। लेकिन मुझे नहीं पता कि कैसे ...

मैं वास्तव में आपकी मदद की सराहना करता हूं!

आपका अग्रिम में ही बहुत धन्यवाद! माइकल


76
2018-04-28 22:18


मूल




जवाब:


आप इसे "पतन" निर्देश का उपयोग कर कर सकते हैं: http://jsfiddle.net/iscrow/Es4L3/ (एचटीएमएल में दो "नोट" की जांच करें)।

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

यही है, आपको एक परिवर्तनीय स्थिति में ढह गई स्थिति को स्टोर करने की आवश्यकता है, और उस चर के मान को बदलकर (बस) को ध्वस्त कर दिया जाना चाहिए।


रिलीज 0.14 ए जोड़ा गया uib- घटकों के लिए उपसर्ग:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

परिवर्तन: collapse सेवा मेरे uib-collapse


57
2018-05-06 14:14



यह सीधे सवाल का जवाब नहीं देता है - वह navbar में एक ड्रॉपडाउन बटन के बारे में बात कर रहा है और आप पूरे navbar को ध्वस्त करने के बारे में बात कर रहे हैं। क्या मैं कुछ भूल रहा हूँ? - PW Kad
बेवकूफ अब काम नहीं करता है? - Andy
धन्यवाद आदमी, मैंने यह पता लगाने की कोशिश में काफी समय बिताया कि एक साधारण ढहने वाला मेनू क्यों काम नहीं कर रहा था - Ignacio Vazquez
निजी तौर पर, मुझे नहीं लगता कि यूवी-पतन एक नौसेना बार के लिए जाने का गलत तरीका है। मैं यूआईबी-ड्रॉपडाउन का उपयोग करूंगा। - jae.phoenix


2015-06 अपडेट करें

पर आधारित एंटोनीपायर की टिप्पणी / उदाहरण:

का उपयोग करते हुए uib-collapse विशेषता एनिमेशन प्रदान करता है: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview 

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

प्राचीन ..

मैं देखता हूं कि प्रश्न बीएस 2 के आसपास तैयार किया गया है, लेकिन मैंने सोचा कि मैं बूटस्ट्रैप 3 के समाधान के साथ एनजी-क्लास समाधान का उपयोग कर सुझावों के आधार पर पिच करूँगा ui.bootstrap मुद्दा 394:

से एकमात्र भिन्नता आधिकारिक बूटस्ट्रैप उदाहरण का जोड़ा है ng- टिप्पणियों द्वारा नोट किया गया गुण, नीचे:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">

    <ul class="nav navbar-nav">
    ...

यहां एक अद्यतन कार्य उदाहरण है: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (टोपी टिप लार्स)

ऐसा लगता है कि मेरे लिए सरल उपयोग के मामलों में काम करता है, लेकिन आप इस उदाहरण में ध्यान दें कि दूसरा ड्रॉपडाउन काट दिया गया है ... शुभकामनाएं!


123
2017-10-11 10:45



एनजी-क्लास के बजाय आपको 'collapse = "navCollapsed' 'का उपयोग करना चाहिए। क्योंकि आपका संस्करण कोई एनीमेशन नहीं बनाता है - bernhardh
एक और सुधार: अपने स्निपेट के अंतिम div में ng-click = "navCollapsed = true" जोड़ें ताकि ड्रॉप डाउन मेनू किसी आइटम के चयन के बाद ध्वस्त हो जाए। - Lars Behnke
@streetlogics यह "navCollapsed" होना चाहिए, आप वहां "डी" चूक गए - PSWai
मैंने समय में संपादित नहीं किया, लेकिन मैंने बदल दिया <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}"> सेवा मेरे <div collapse="navCollapsed"> और संक्रमण काम किया! - edhedges
मुझे यहां कुछ याद आना चाहिए, लेकिन क्या इस समाधान के परिणामस्वरूप मेन्यू के डेस्कटॉप संस्करण को ध्वस्त और अवलोकन योग्य नहीं किया गया है, क्या नेविबार-टॉगल छिपा हुआ है? टिप्पणियों के अपडेट के साथ भी यह अभी भी मामला है।


सुनिश्चित नहीं है कि किसी के पास एक ही उत्तरदायी समस्या है, लेकिन यह मेरे लिए एक साधारण सीएसएस समाधान था।

एक ही उदाहरण

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

साथ में

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}

8
2018-01-13 22:01



आपको एनएवी आईडी के साथ .collapse चयनकर्ता को प्रीपेड करना चाहिए ताकि यह पृष्ठ में हर पतन को पेंच न करे - NiloVelez


कोणीय / ui बूटस्ट्रैप के साथ उत्तरदायी / ड्रॉपडाउन नेविबार के लिए मेरा समाधान (जब कोणीय 1.5 और ui-bootrap 1.2.1 के लिए अद्यतन)
index.html 

     ...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}

1
2018-03-02 09:24