2016-01-14 5 views
0

Я пытаюсь открыть раскрывающееся меню MaterializeCSS, работающее внутри карты, но ничего не происходит, когда я нажимаю кнопку.Материализовать выпадающее меню не работает внутри карты

Я подготовил jsfiddle с примерами из документации и всеми ответами, которые я мог найти в stackoverflow и google, но я все еще не могу заставить его работать. Что я делаю не так?

https://jsfiddle.net/mozfet/3k4dkk6s/

HTML

<div class="row"> 
    <div class="col s12"> 
    <div class="card blue-grey darken-1"> 
     <div class="card-content white-text"> 
     <span class="card-title">Card Title</span> 
     <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> 
     </div> 
     <div class="card-action"> 
     <a href="#">This is a link</a> 

     <!-- Dropdown Trigger --> 
     <a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a> 

     <!-- Dropdown Structure --> 
     <ul id='dropdown1' class='dropdown-content'> 
      <li><a href="#!">one</a></li> 
      <li><a href="#!">two</a></li> 
      <li class="divider"></li> 
      <li><a href="#!">three</a></li> 
     </ul> 
     </div> 
    </div>  
    </div> 
</div> 

JS

$(document).ready(function() { 
    console.log("intiate dropdown"); 
    $('.dropdown-button').dropdown({ 
    inDuration: 300, 
    outDuration: 225, 
    constrain_width: false, 
    hover: true, 
    gutter: 0, 
    belowOrigin: false, 
    alignment: 'left' 
    }); 
}); 

CSS

.card { 
    overflow: visible !important; 
}; 
+2

Работает, если вы переключитесь на jQuery 2.x, поэтому должна быть проблема совместимости с Materialize –

+0

Thx, у меня есть работа над кодепином http://codepen.io/anon/pen/BjdMyg. Единственная реальная разница, которую я замечаю, - это версия jquery ... – Mozfet

+0

Я все еще не могу заставить ее работать на jsfiddle, хотя ... – Mozfet

ответ

0

Существует ошибка с выпадающими и выбирает в материализации 0.97.2 и 0.9 7,3; для получения дополнительной информации см. https://github.com/Dogfalo/materialize/issues/2265 и https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931.

Я использую версию Сасс из MaterializeCSS в Метеоре и работал вокруг проблемы, используя поэтическими: [email protected] в моем файле метеорных пакетов, чтобы заставить старую версию. Теперь выпадающие меню работают, старый jquery и все!

Смежные вопросы