如何在选择字段内添加内容的切换选项？
在选择图像中显示的选项后，在选择字段内显示内容 here
点击“立即预订”后即可看到工作示例＆＃39; ＆GT;特别优惠＆gt; http://www.111resorts.com
菜单中的rommance这是我的HTML
var _slideshow_current = 0;
var _slideshow_next = 0;
var _slideshow_maximal = 0;
var _slideshow_width = 0;
var _slideshow_autorun = true;
var _front_slide_maximal = 0;
(function ($) {
$(document).ready(function() {
var height_screen = $(window).height();
$('.views_slideshow_cycle_main .image-field-caption').each(function(poc) {
var str = $(this).html();
if (parseInt(str.indexOf("<br"))>0) {
$(this).addClass('two_line');
}
$(this).css({'top':parseInt(height_screen/2)+'px'});
});
$('#custom-helpers-reservation-so1-form .form-item-eZ-Nights input').change(function(poc) {
var prem_code = $(this).siblings('label').find('.prem_code').html();
$(this).closest('#custom-helpers-reservation-so1-form').find('.field-offer-promocode').val(prem_code);
});
$('#block-custom-helpers-custom-helpers-book-now h2').click(function() {
$(this).parent().toggleClass('form_shown');
});
if ($('body').hasClass('page-bali') || $('body').hasClass('page-lombok')) {
$('#block-custom-helpers-custom-helpers-book-now').toggleClass('form_shown');
}
$('.procode_select_content .main_select').click(function() {
$('.procode_select_content .main_select_content').slideToggle(300,function() {
$('.procode_select_content .main_subselect_content').hide();
});
$('.special_reservation_form .field-promocode').val('');
$('.procode_select_content .procode_option').removeClass('selected');
});
$('.procode_select_content .main_subselect').click(function() {
var parent = $(this).parent();
var nights = $(this).attr('rel').split(',');
var is_open = parent.hasClass('selected');
$('#edit-ez-nights option').removeAttr('disabled');
$('.procode_select_content .procode_option').removeClass('selected');
$('.special_reservation_form .field-promocode').val('');
$('.procode_select_content .main_subselect_content:visible').slideUp();
if (!is_open) {
parent.find('.main_subselect_content').slideDown();
$('.special_reservation_form .field-promocode').val(parent.attr('rel'));
parent.addClass('selected');
if (nights) {
var selected = false;
$('#edit-ez-nights option').attr('disabled','disabled');
for (var prop in nights) {
$('#edit-ez-nights option[value="'+nights[prop]+'"]').removeAttr('disabled');
if (!selected) {
$('#edit-ez-nights').val(nights[prop]);
selected = true;
}
}
}
}
});
$('.view-front-page .views-row').supersize();
_front_slide_maximal = ($('.view-front-page .views-row').length-1);
$('table.dowload_table .form-type-password input, .special_reservation_form .form-item-promotioncode input').focus( function() {
$(this).parents('.form-item').find('label').hide();
});
$('table.dowload_table .form-type-password input, .special_reservation_form .form-item-promotioncode input').blur( function() {
if ($(this).val()=='') {
$(this).parents('.form-item').find('label').show();
};
});
$('.scroll_top').click(function() {
$('html, body, .mobile_content_wrap_inner').animate({
scrollTop: 0
}, 500);
});
if ($('input#edit-promotioncode').val()!='') {
$('.form-item-promotioncode label').hide();
}
$('.webform-client-form .form-submit').click(function() {
$('.webform-component--left-container--code input').val('4444');
});
$('.field-name-field-link-name .field-item, .close_btn').click(function() {
$('.field-name-field-subtexts, .close_btn_cont').toggle();
$('html, body, .mobile_content_wrap').animate({
scrollTop: ($(".field-name-field-link-name").offset().top-80)
}, 500);
});
_slideshow_maximal = ($('.second_content_content .single_content').length-1);
if (_slideshow_maximal>0) {
_slideshow_width = $('.slide_content_wrapper').width();
var new_node = $('.second_content_content .slide_content .single_content').last().clone();
$('.second_content_content .slide_content .single_content').first().clone().appendTo('.second_content_content .slide_content');
new_node.prependTo('.second_content_content .slide_content');
$('.second_content_content .slide_content').css('left',-_slideshow_width+"px");
$('.second_content_content .right_arrow, .second_content_content .main_right_arrow').click(function() {
_slideshow_show_next();
});
$('.second_content_content .left_arrow, .second_content_content .main_left_arrow').click(function() {
_slideshow_next = _slideshow_current-1;
_start_sliding();
});
$('.slide_pager a').click(function() {
_slideshow_next = parseInt($(this).attr('rel'));
_start_sliding();
});
$('.second_content_content').hover(function() {
},function() {
_slideshow_autorun = true;
});
$('.second_content_content').click(function() {
_slideshow_autorun = false;
});
setTimeout(_slideshow_run_func,4000);
}
$('.mobile_menu_btn, .mobile_menu h2.top_title').click(function() {
var main_wrapper = $('.mobile_content_wrap');
left = parseInt(main_wrapper.css('left').replace('px',''));
if (left==0) {
left = -300;
$("body").addClass('menu_shown');
}
else {
left = 0;
$("body").removeClass('menu_shown');
}
$('.mobile_content_wrap').stop().animate({
left: left
},300);
});
$('#eZ_child').parent().hide();
$('.special_reservation_form .form-submit').click(function() {
var date = $('.form-item-eZ-chkin-temp-date input').val().replace(' / ','-').replace(' / ','-').split('-');
$('.form-item-start-date input').val(date[2]+'-'+date[1]+'-'+date[0]);
});
$("a:regex(href, .*pdf)").attr('target','_blank');
doLayout();
$(window).bind('resize', doLayout);
$('#header .menu-block-wrapper > ul > li > a').click(function() {
winWidth = $(window).width();
if (winWidth<=700) {
if (!$(this).siblings('ul').is(':visible')) {
$('#header ul.menu li ul:visible').slideUp();
}
$(this).siblings('ul').slideToggle();
return false;
}
});
if ($("body").hasClass('front')) {
setTimeout(function() {
$("#header .logo img").fadeIn(3000);
$("#header .logo span").fadeOut(3000);
},2000);
}
$('.mobile_content_wrap').scroll(function() {
if ($('.mobile_content_wrap').scrollTop()>200) {
$('.scroll_top').show();
}
else {
$('.scroll_top').hide();
}
});
$('#block-menu-block-3 .menu-block-wrapper > .menu > li > a').each(function() {
$(this).html($(this).html()+'<span> </span>');
});
$('#block-menu-block-3 .menu-block-wrapper > .menu > li > a').click(function() {
var parent_nore = $(this).parent();
parent_nore.siblings().removeClass('jsexpanded');
parent_nore.closest('ul.menu').find('ul.menu').stop().slideUp();
if (!parent_nore.hasClass('jsexpanded')) {
parent_nore.addClass('jsexpanded');
parent_nore.find('ul.menu').stop().slideDown();
}
else {
parent_nore.removeClass('jsexpanded');
};
return false;
});
$('#block-menu-block-3--2 .menu-block-wrapper .menu a').each(function() {
if ($(this).siblings('ul').length>0) {
$(this).click(function() {
var parent_nore = $(this).parent();
if(parent_nore.hasClass('expanded')) {
parent_nore.removeClass('expanded').addClass('collapsed');
$(this).siblings('ul.menu').stop().slideUp();
}
else {
parent_nore.removeClass('collapsed').addClass('expanded');
$(this).siblings('ul.menu').stop().slideDown();
};
return false;
});
}
});
$('#block-menu-block-3--2 .menu-block-wrapper .menu li').each(function() {
var ul_children = $(this).children('ul.menu');
if(ul_children.length>0 && !$(this).hasClass('active-trail')) {
$(this).removeClass('expanded').addClass('collapsed');
ul_children.stop().hide();
}
else {
ul_children.stop().show();
}
});
});
$(document).scroll(function() {
if ($(window).scrollTop()>10) {
$('.scroll_top').show();
}
else {
$('.scroll_top').hide();
}
});
function doLayout() {
var winWidth, headerHeight, footerHeight;
winWidth = $('#block-system-main').width();
newH = Math.round(((winWidth/1600)*970));
$('.juicebox_main_cont').height((newH+40));
// $('.view-mobile-gallery').height(newH);
}
function _slideshow_show_next() {
_slideshow_next = _slideshow_current+1;
_start_sliding();
}
var _slideshow_run_func = function _slideshow_run() {
if (_slideshow_autorun) {
_slideshow_show_next();
}
setTimeout(_slideshow_run_func,4000);
}
function _start_sliding() {
_slideshow_current = _slideshow_next;
$('.second_content_content .slide_content').stop().animate({left: -((_slideshow_current+1)*_slideshow_width)},500,function() {
if (_slideshow_next<0) {
$('.second_content_content .slide_content').css('left',-((_slideshow_maximal+1)*_slideshow_width)+"px");
}
else if (_slideshow_next>_slideshow_maximal) {
$('.second_content_content .slide_content').css('left',-_slideshow_width+"px");
}
});
if (_slideshow_current<0) {
_slideshow_current = _slideshow_maximal;
}
else if (_slideshow_current>_slideshow_maximal) {
_slideshow_current = 0;
}
$('.slide_content_wrapper .slide_pager a').removeClass('active');
$('.slide_content_wrapper .slide_pager a.page_'+_slideshow_current).addClass('active');
}
})(jQuery);
jQuery.expr[':'].regex = function(elem, index, match) {
var matchParams = match[3].split(','),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(':')[0] : 'attr',
property: matchParams.shift().replace(validLabels,'')
},
regexFlags = 'ig',
regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
function setCookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}
function getCookie(c_name) {
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
};
(function($) {
//Resize image on ready or resize
$.fn.supersize = function() {
//Invoke the resizenow() function on document ready
$(document).ready(function() {
$('.view-front-page .views-row').resizenow();
//$('#maincontent-wrapper').setrightheight();
});
//Invoke the resizenow() function on browser resize
$(window).bind("resize", function() {
$('.view-front-page .views-row').resizenow();
//$('#maincontent-wrapper').setrightheight();
});
};
//Adjust image size
$.fn.resizenow = function() {
//Define starting width and height values for the original image
$(this).width($(".view-front-page").width());
$(this).find('img').each(function(poc) {
startwidth = $(this).attr('width');
startheight = $(this).attr('height');
//Define image ratio
ratio = startheight/startwidth;
//Gather browser dimensions
browserwidth = $('body').width();
browserheight = $(window).height();
//Resize image to proper ratio
if ((browserheight/browserwidth) > ratio) {
$(this).height(browserheight);
$(this).width((browserheight / ratio));
//$(this).find('img').height(browserheight);
//$(this).find('img').width(browserheight / ratio);
} else {
newheight = (browserwidth * ratio);
//console.debug(newheight);
$(this).css('width',browserwidth);
$(this).css('height',newheight);
//console.debug(browserwidth+" - "+ ratio);
//$(this).find('img').width(browserwidth);
//$(this).find('img').height(browserwidth * ratio);
}
//console.debug("----------------------");
//Make sure the image stays center in the window
$(this).css('left', (browserwidth - $(this).width())/2);
$(this).css('top', (browserheight - $(this).height())/2);
});
};
//Adjust image size
$.fn.setrightheight = function() {
var browserheight = $(window).height();
$(this).css({"height":(browserheight-160)+"px"});
};
})(jQuery);;.special_reservation_form .container-inline-date .form-item input[type="text"] {
background: #fff url(icon_calendar.png?v=1) no-repeat right center;
width: 92px;}
input[type="text"], input[type="password"], input[type="email"], select {
border: 1px solid #a29c8b;
background: #fff;
width: 200px;
height: 18px;
line-height: 18px;
font-size: 11px;
padding: 2px 8px;
font-family: "ZurichBT-RomanCondensed";
letter-spacing: 1px;
}
.page-special-offers #block-system-main,.node-webform{text-align:center;}
.special_offer_form{text-transform:uppercase;margin-bottom:40px;}
.special_offer_form .form-radio{display:none;}
.special_offer_form h2{margin:0 0 30px 0;}
.special_offer_form .collumn_content{text-align:left;height:320px;}
.special_offer_form.imported_offer .collumn_content{height:auto;margin-bottom:20px;}
.special_offer_form.imported_offer h2{margin:0 0 20px 0;}
.special_offer_form .more_desc,.special_offer_form ul,.special_offer_form p{text-transform:none;}
.special_offer_form .form-type-radio{padding:8px 0;border-top:1px solid #a29c8b;border-bottom:1px solid #a29c8b;margin:0 0 -1px 0;}
.special_offer_form .form-type-radio:after,.node-webform:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
.special_offer_form .form-type-radio input,.special_offer_form .form-type-radio label{float:left;}
.special_offer_form .form-type-radio input{margin:5px 10px 0 0;}
.special_offer_form .form-type-radio label{width:272px;}
.special_offer_form .more_desc,.form_more_info ul,.form_more_info p{display:inline-block;font-size:11px;line-height:14px;}
.form_more_info ul,.form_more_info p{margin:0px;}
.form_more_info ul{margin-bottom:16px;}
.form_more_info ul,.form_more_info li{list-style:none;padding:0px;margin:0px;}
.form_more_info li{padding-left:20px;position:relative;}
.form_more_info .header{margin-top:20px;}
input[type="text"],input[type="password"],input[type="email"],select{border:1px solid #a29c8b;background:#fff;width:200px;height:18px;line-height:18px;font-size:11px;padding:2px 8px;font-family:"ZurichBT-RomanCondensed";letter-spacing:1px;}::-webkit-input-placeholder{font-size:12px;}:-moz-placeholder{font-size:12px;}::-moz-placeholder{font-size:12px;}:-ms-input-placeholder{font-size:12px;}
select{padding:4px;height:24px;width:80px;}
form label{line-height:24px;}.webform-client-form{position:relative;}
.form_shown .special_reservation_form{display:block;}
.special_reservation_form .form-item{margin:0 0 8px 0;}
.special_reservation_form .form-item label{float:left;width:66px;font-weight:normal;font-size:12px;}
.special_reservation_form .form-item .form-item{margin:0;}
.special_reservation_form .form-type-date-popup .date-padding label,.special_reservation_form .form-type-date-popup .description{display:none;}
.special_reservation_form .form-type-date-popup .date-padding{padding:0;}
.special_reservation_form .form-item-promotioncode{position:relative;}
.special_reservation_form .form-submit{background-color:#000;color:#fff;border:1px solid #fff;display:block;margin-top:16px;height:32px;float:right;line-height:32px;font-size:11px;padding:0px 20px;text-align:center;}
.special_reservation_form .form-submit:hover{text-decoration:underline;background-color:#000;}
.special_reservation_form .container-inline-date .form-item input[type="text"]{background:#fff url(icon_calendar.png?v=1) no-repeat right center;width:92px;}
.special_reservation_form .form-item-eZ-chkin-temp,.special_reservation_form .form-item-eZ-room,.special_reservation_form .book_direct{float:left;clear:both;}
.special_reservation_form .form-item-eZ-Nights,.special_reservation_form .form-item-eZ-adult{float:right;}
.special_reservation_form .form-item-eZ-room select,.special_reservation_form .form-item-eZ-Nights select,.special_reservation_form .form-item-eZ-adult select{width:50px;;}
.special_reservation_form .book_direct{line-height:12px;margin-top:10px;font-size:10px}
.special_reservation_form .book_direct a{color:#fff;}
.special_reservation_form .form-item-resort input[type="text"]{width:231px;}
.region-footer,.region-footer div,.region-footer ul,.region-footer li{display:inline;}
.region-footer ul{padding:0px;margin:0px;margin-right:16px;padding-left:0px;}
.region-footer li{border-right:1px solid #A19C84;padding:0px;margin:0px;padding-right:6px;margin-left:6px;float:left;}
.region-footer li.last{border:none;padding:0px;}
.webform-component-date div{display:inline;}
.region-footer{display:block;}
.footer_right_cont{float:right;}
.footer_right_in{float:right;}
.procode_select_content{float:left;width:210px;border:1px solid #a29c8b;background:#fff;color:#000;}
.procode_select_content .main_select_content{display:none;}
.procode_select_content .main_select,.procode_select_content .main_subselect{background:transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right center;padding:2px 8px;line-height:24px;height:24px;cursor:pointer;}
.procode_select_content .main_subselect{background:transparent url(https://nsgi.novascotia.ca/gdd/images/info3.png) no-repeat right center;height:auto;}
.procode_select_content .main_subselect .radio_div{background:none repeat scroll 0 0 #ffffff;border:1px solid #000;content:" "; display:block; height:6px; float:left; margin:8px 8px 0 0;width:6px;border-radius:50%;}
.half_cont{width:80%;margin:0 auto 20px auto;}
.procode_select_content .selected .main_subselect .radio_div{background:#000;}
.procode_select_content .procode_option{border-top:1px solid #a29c8b;}
.procode_select_content .main_subselect_content{font-size:11px;padding:0 8px 6px 8px;line-height:12px;text-transform:none;display:none; color:#000;}
.procode_select_content .main_select, .procode_select_content .main_subselect{ text-align: left; font-size:14px;
color: #000;}
.procode_select_content .main_subselect {
text-align: left;
color: black;
font-size: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="special_reservation_form clearfix" target="_blank" action="#" method="get" style=" text-align: left; color:#000; font-family:bvilla; max-width: 220px;padding-bottom:10px;" id="custom-helpers-reservation-form" accept-charset="UTF-8">
<!--input id="date" name="check_in_date" value="" -->
<input class="field-promocode" type="hidden" name="promotion_code" value="">
<div class="clear"></div>
<div class="procode_select form-item">
<label>OFFERS</label><br />
<div class="procode_select_content"><div class="main_select">Special offers</div>
<div class="main_select_content" style="display: none;">
<div class="procode_option" rel="ebird">
<div class="main_subselect" rel="2,3">
<div class="radio_div"></div>Early Bird</div>
<div class="main_subselect_content" style="display: none;"> Romantic dinner for 2 in the romantic</div>
</div>
<div class="procode_option" rel="3nrom">
<div class="main_subselect" rel="5">
<div class="radio_div"></div>3 nights romance</div>
<div class="main_subselect_content" style="display: none;">STAY 5 nights / Pay 4 nights. Price includes: 1 x Complimentary night including breakfast. 1 x 1 Hour massage for 2 people. Valid till the 22<sup>th</sup> December 2016</div>
</div>
<div class="procode_option" rel="1BedroomVilla">
<div class="main_subselect" rel="3">
<div class="radio_div"></div>Another Option</div>
<div class="main_subselect_content" style="display: none;">Get 1x One hour spa for two<br>+ 1x dining for two</div>
</div>
<div class="procode_option" rel="1BedroomVilla">
<div class="main_subselect" rel="2">
<div class="radio_div"></div>STAY 2 NIGHTS</div>
<div class="main_subselect_content" style="display: none;">Stay 6 Pay 5 </div>
</div>
<div class="procode_option" rel="111ph">
<div class="main_subselect" rel="3">
<div class="radio_div"></div>One Another option</div>
<div class="main_subselect_content" style="display: none;">An exclusive 3 bedroom villa set above One Eleven’s private sanctuary. The Penthouse is contemporary in design, with an uber chic lounge area, generous dining space and a kitchen with full cooking facilities</div>
</div>
</div></div>
</div>
<div class="clear"></div>
<div class="book_direct" style="text-align:left;">Book Direct for<br/><a style="padding:0; text-align:left;" href="#">best rate guarantee</a></div>
<input type="submit" id="edit-submit-password" name="op" value="Book Now" class="form-submit">
</div>
</form>