Выпадающее меню Anchor для опций со скрытым контентом

У меня есть раскрывающееся меню, в которое я хотел бы добавить привязки. В раскрывающемся списке есть 4 варианта, которые при запуске скрыты. При нажатии этой опции этот раздел будет виден. Выпадающее меню будет содержать контент над ним, и мне нужно, чтобы страница переместилась вниз, когда нажимается и становится видимой. Как добавить привязки к этим параметрам?Выпадающее меню Anchor для опций со скрытым контентом

Я не очень хорошо разбирается в JavaScript, но это то, что у меня есть:

<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $('#purpose').on('change', function() { 
        if (this.value == '0'){ 
         $("#value0").show(); 
        } else { 
         $("#value0").hide(); 
        } 

        if (this.value == '1'){ 
         $("#value1").show(); 
        } else { 
         $("#value1").hide(); 
        } 

        if (this.value == '2'){ 
         $("#value2").show(); 
        } else { 
         $("#value2").hide(); 
        } 

        if (this.value == '3'){ 
         $("#value3").show(); 
        } else { 
         $("#value3").hide(); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 

    <!--Drop Down--> 
    <p><select id="purpose"> 
    <option value="0">&nbsp;</option> 
    <option value="1">1 column w/big hero</option> 
    <option value="2">1 column w/s-curve</option> 
    <option value="3">1 column; linear</option> 
    </select></p> 
    <!--End Drop Down--> 

    <table width="100%" height="1000" cellspacing="0" cellpadding="0" border="0" align="left"> 
     <tbody> 
      <tr> 
       <td>&nbsp; &nbsp;</td> 
      </tr> 
     </tbody> 
    </table> 

    <!--Default Value 0--> 
    <div id="value0" style="display:block;"></div> 
    <!--End Default Value 0--> 

    <!--Option 1--> 
    <div align="center" id="value1" style="display:none;">Content for value 1</div> 
    <!--End Option 1--> 

    <!--Option 2--> 
    <div align="center" id="value2" style="display:none;">Content for value 2</div> 
    <!--End Option 2--> 

    <!--Option 3--> 
    <div align="center" id="value3" style="display:none;">Content for Value 3</div> 
    <!--End Option 3--> 

    </body> 
</html>

источник

2016-02-08 cgrouge

Приятно видеть, что вы начинаете с Javascript, добро пожаловать! Я немного обновил ваш вопрос (и дал вам ответ), чтобы сделать код более читаемым. Счастливое кодирование ... –

Спасибо за предложения, это гораздо более удобочитаемо. К сожалению, после ввода ответа, который вы мне дали, я не получил никакого движения. Я добавил его к значению 1 без такой удачи. Я показал это здесь: https://jsfiddle.net/bz4140aq/3/ Я также использовал его в своем оригинальном рабочем документе без такой удачи. Есть ли что-то, что я вставил неправильно? – cgrouge

Вы можете получить верхний уровень элемента вашей кокетливой.

var valueTop = $("#value0").offset().top; // what is the offset of the item 
$(window).scrollTop(valueTop); // set the window's scroll position

В вашем примере:

$('#purpose').on('change', function() { 
    if (this.value == '0'){ 
     $(value0).show(); 
     var vtop = $("#value0"); 
     var valueTop = vtop.offset().top 
     $(window).scrollTop(valueTop);  
    } else { 
     $("#value0").hide(); 
    } 
})

Вы также можете анимировать скроллинг:

$('#purpose').on('change', function() { 
    if (this.value == '0'){ 
     $(value0).show(); 
     var vtop = $("#value0"); 
     var valueTop = vtop.offset().top 
     $('html, body').animate({scrollTop: valueTop},500); 
    } else { 
     $("#value0").hide(); 
    } 
})

источник

2016-02-08 20:51:22

Спасибо за представление, я вставил ваш код и не смог заставить его работать, пока я не сыграл с ним. Я отправил свой ответ за то, что работает ниже. – cgrouge

Не уверен, что вам все еще нужна помощь? Если да, пожалуйста, поделитесь. Был ли ответ полезным? Пожалуйста, примите его, если да :-) –

Да, мне удалось в конечном итоге работать. Я столкнулся с проблемой, когда после вставки кода мой контент не показывался. Затем я изменил это: vtop.show(); : $ (значение0) .show(); И теперь все работает отлично! Еще раз спасибо за помощь! – cgrouge

Выпадающее меню Anchor для опций со скрытым контентом

ответ

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