-3
選択フィールド内のコンテンツにトグルオプションを追加するにはどうすればよいですか？選択フィールド内の選択フィールドのオプションを切り替えますか？オプションを選択した後に選択フィールド内にコンテンツを表示
ショーの内容画像 here
に示すように、このオプションを選択した後、あなたは「今予約」>特別オファーをクリックした後、実施例を見ることができます>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() {
\t \t var winWidth, headerHeight, footerHeight;
\t \t winWidth = $('#block-system-main').width();
newH = Math.round(((winWidth/1600)*970));
\t \t $('.juicebox_main_cont').height((newH+40));
// $('.view-mobile-gallery').height(newH);
\t }
function _slideshow_show_next() {
\t \t _slideshow_next = _slideshow_current+1;
_start_sliding();
\t }
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">
\t <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>
\t \t <input type="submit" id="edit-submit-password" name="op" value="Book Now" class="form-submit">
\t \t \t </div>
</form>
作業しているコードはどこですか？ –
あなたが試したJavaScriptコードを投稿してください。 –
男、私はあなたのためにそれを書こうとしましたが、私は降伏しました。あなたのHTMLコードはあまりにも面倒なので、フォーマットを修正しようとすると頭痛があります。それを整理して、尋ねる。 –